-
Notifications
You must be signed in to change notification settings - Fork 122
几个小建议 #3
Description
前言(废话):
-- 最近在用node写一个后台的统计信息系统,架子在重新搭,以前也写过一些general的样式,主要是为了把一些手贱写在标签style中样式抽离,也有一点省事、节省css代码的考虑。
-- 这两天看布局,偶然看到你这个lib.css,基于造轮子的想法,直接拿来用了,用了这两天发现一些小问题,提供几个意见,能提供思路最好,不成熟的话就当个吐槽随便看看。
-
建议将css迁移或者重构为sass:
-- 原因:zxx.lib.css中"single CSS"里面,多是一些很碎,很杂的style,一般得需要三个以上的组合才能达到自己想要的效果。
-- 栗子:就拿字体来说,为了实现白色宋体24号字(就不考虑背景色的问题,不然又需要叠加),这样这个元素的class必然需要class='f24 fs wh',再加上一些需要自定义的属性,就需要更多的class,整个结构看起来就很烦。
-- 建议:将css迁移到sass中,或者用sass重写,比如一些明显循环的f0-f24就可以用sass里面的【@for】实现循环,简单明了。关键是sass可以自动编译为min.css,也实现了另一个issues提出的压缩css。 -
class的长度和构造:
-- 原因:你里面大多是吧每个样式单词的首字母拼接构成一个class,固然使每个class的长度减短,便于快速代码编写,但是不可避免的出现的常见的问题:命名冲突。
-- 栗子:.fa{font-family:Arial;}。图标库Font Awesome中,v4.0后,图标库的使用class的标示就是"fa",这个class刚好跟他冲突,如果使用Font Awesome就必须把这个class从css删除或者改为其他的。
-- 建议:- 早期我写general.css的时候,基本都是最简单的style抽离,即把
<div style="display:none;"></div>改为<div class="dispaly-none"></div>,后来发现这种写法只是将style抽离、减少了回流、增强了代码的可读性,并不能真正的快速代码编写,因为最简单的看,字母和字符的数量并没有减少。 - 后来将其中一部分转为
..ml-05em {margin-left: 0.5em;}``.ml-10em {margin-left: 10em;}``.ml-8 {margin-left: 8px;}``.ml-40 {margin-left: 40px;},这样基本降低了代码量,而且基本能在mobile和pc端通用,毕竟mobile中px的鸡肋很烦。 - 再后来,看了sass和bootstrap的less写法,发现很多东西可以构造为模块化(或者叫做组件化),于是开始各种类'bg-danger/bg-primary'这种代表一定聚类的写法,然后用sass或者less的变量去动态编译到对应的css,再用起来比较舒服。而且可以把一些通用的单体样式(你的这种signal-css)聚合成一些集合去用。发现效果不错,只不过一个最大的缺点就是很难做的通用,整体sass切换到另一个系统后,如果风格不同,就需要改变较为多的变量。
- 早期我写general.css的时候,基本都是最简单的style抽离,即把
跑偏了有点远,说点有用的:
这种 .dn{display:none;} .di{display:inline;} .db{display:block;},我认为是class过短了,很容和其他的库或者未知人的代码冲突,建议使用-连接或者添加整个单词来作为class,比如dnone,这个样重复的概率明显降低,而且可读性比'dn r tl'略高(dnone,fring,ta-left)。
其实每个人/项目,每个css都有基于业务的独特解读,如果要通用就必须牺牲一些东西。
所以取舍在于你,但是css转向sass应该算是大势所趋,太多的框架已经做出了选择。