zxx.lib.css icon indicating copy to clipboard operation
zxx.lib.css copied to clipboard

几个小建议

Open occultskyrong opened this issue 8 years ago • 1 comments

前言(废话): -- 最近在用node写一个后台的统计信息系统,架子在重新搭,以前也写过一些general的样式,主要是为了把一些手贱写在标签style中样式抽离,也有一点省事、节省css代码的考虑。
-- 这两天看布局,偶然看到你这个lib.css,基于造轮子的想法,直接拿来用了,用了这两天发现一些小问题,提供几个意见,能提供思路最好,不成熟的话就当个吐槽随便看看。

  1. 建议将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。

  2. 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切换到另一个系统后,如果风格不同,就需要改变较为多的变量。

跑偏了有点远,说点有用的: 这种 .dn{display:none;} .di{display:inline;} .db{display:block;},我认为是class过短了,很容和其他的库或者未知人的代码冲突,建议使用-连接或者添加整个单词来作为class,比如dnone,这个样重复的概率明显降低,而且可读性比'dn r tl'略高(dnone,fring,ta-left)。

其实每个人/项目,每个css都有基于业务的独特解读,如果要通用就必须牺牲一些东西。

所以取舍在于你,但是css转向sass应该算是大势所趋,太多的框架已经做出了选择。

occultskyrong avatar Mar 19 '16 05:03 occultskyrong

对了,补充两句,你这个css最后版本是在‘2015-02-09 v2.8’发布的,所以时间较长,不知道这一年你是否兴趣不在此,在鼓捣一些其他的东西,接下来这个css是否还有兴趣去维护? 其次是css转sass的问题,必然会产生对过往版本的兼容考虑。。。。

最后,感谢。

occultskyrong avatar Mar 19 '16 05:03 occultskyrong