zhangxinxu / zxx.lib.css Goto Github PK

在单一样式中，设置高度部分，高度设为14px的类应该是.h14。

.opa0{opacity:0; filer:alpha(opacity=0);}
是不是应该.opa0{opacity:0; filter:alpha(opacity=0);}

您好。建议您的文件名使用 zxx.css 和 zxx.min.css，这样更短且和 jQuery、Bootstrap 这种常见库相匹配，且一般没有哪一个库文件自己给自己贴一个 lib 的哦，是画蛇添足了。-min 改成 .min 也是为了统一。

另外建议把库文件推送到 staticfile.org、cdnjs.com 这一类的公共 CDN 上去，方便大家直接调用。

个人的小小建议，不一定对，仅仅是个人观点。希望考虑，谢谢！

说直接点，就商业应用案例不？如果有，能不能贴几个出来学习下

前言（废话）：
-- 最近在用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应该算是大势所趋，太多的框架已经做出了选择。

个人任务通过类来构建的具体样式的框架，比如.mb20{margin-bottom:20px;}这种具体样式，只适用于特定的公司或者项目，其他公司可能不会有如此多的具体样式需要调用，而且现在有sass等预编译语言了，如果是出于快速开发的考虑，可以通过sass来引入具体的样式，这样可以避免过多的具体的样式嵌套在html中。张老师的git库都很值得小辈学习，我会继续研究