上周末翻译了 molliza 和 google 关于高效 CSS 的写法的文章，觉得他们的说法有一些共同之处，就是 CSS 解析引擎是从右到左开始解析的，我们要做的就是减少 CSS

引擎的解析时间，所以避免一些低效的 CSS 选择器去匹配大量元素能够减少页面加载的时间。结合我自己编写 CSS 的经验，我总结如下：

1) CSS 的层级选择器不要超过 3 个，保持 3 个以内

bad case： .class1 ul li a{}

good case .class a{}

2) 尽量少使用标签选择器，但是也是可以使用的，比如写列表（ul li 语法）的时候，如果给每个 li 一个 class，那样相反不仅代码难看，而且也无疑的增加了代码

复杂度，很难维护，总之，在于自己权衡这个点就是了。

3) 使用一些有代表意义的单词，比如我在模块化开发的过程中，我一般用 mod-xxx, 在这里模块中我写的 CSS 都在这个里面包含，很利于维护，代码也很漂亮，

不会超过 3 层的包含关系。也不用过多的考虑同名的问题。

4) 不要早 id 前面添加任何限定符，包括 class tag 或者其他的选择符。

bad case： .class #id{}   div#id{} 这 2 个都是不推荐的

good case： #id{} 推荐的做的

5) 不要再 class 前面使用标签限定符，除非你是想给不同的标签定义多个 class ，那么只有这样用了。

bad case: div.class{}

good case :.class{} 

   另外： div.class{} span.class{} 这样那就这样吧。。

6) 使用 class 来代替层级关系，如果发现要写很多的层级关系才能表达意义的时候，那么放弃吧。干脆写一个 class 来替代这个解决方案。例如

bad case: #id .class1 ul li a{}

good case .class2{} 

将这个 class2 直接加在 a 标签上。

请各位大侠拍砖。谢谢。