关于如何编写更高效更优雅的CSS代码，网上已经有很多文章了。
但我还是在这里重新总结一下，算是对CSS的温习，也方便以后查找资料。
下面开始正文。
必不可少的reset.css
不同的浏览器之间，对标签都有设置默认样式，所以需要重置这些影响布局统一性的样式。
reset.css的代码， 可参考YUI的：http://developer.yahoo.com/yui/reset/
如果是移动端的web开发，要清除浏览器默认的点击样式，还需加上：
1 *, ::after, ::before{ 2 -webkit-tap-highlight-color: rgba(0,0,0,0); 3 -moz-tap-highlight-color: rgba(0,0,0,0); 4 -o-tap-highlight-color: rgba(0,0,0,0); 5 -ms-tap-highlight-color: rgba(0,0,0,0); 6 tap-highlight-color: rgba(0,0,0,0); 7 }
例如Chrome浏览器，有字体最小显示尺寸的设置，默认是12px。
如果希望页面不受这个设置的限制，可以加上下面的代码：
1 *, ::after, ::before{ 2 -webkit-text-size-adjust: none; 3 -moz-text-size-adjust: none; 4 -o-text-size-adjust: none; 5 -ms-text-size-adjust: none; 6 text-size-adjust: none; 7 }
Chrome升级到27之后的版本，text-size-adjust就已经失效了，无论在手机端还是电脑端。
避免使用*(全局)选择器。
我想理由大家都知道了吧？ 这玩意很耗性能！
这个时候你肯定想吐槽上面给出的两段css代码。丫的，明明用了*选择器！
好吧，的确是用了。
我个人的建议是：能不用就尽量避免不要用。
因为，既然这个 全局选择器 被设计出来，肯定是有需要的场景。所以，需要用的时候还是要用，但不要滥用！
其实，官方文档中貌似没有「全局选择器」这个叫法。
英文是：Universal rules。
直译：通用规则。
我觉得这样比较难理解，所以称为「全局选择器」。 当然，Universal rules 不单单只有 * 号符。
下面这些都是「全局选择器」：
1 [hidden="true"] {…} /* A universal rule */ 2 tree > [collapsed="true"] {…} /* A universal rule */ 3 * {…} /* A universal rule */
减少没必要的标签
关于这点，很多有经验的前端工程师也时常会犯错。因为这是一个不算坑的坑 : 浏览器对CSS selectors的解释是「从右到左」的。
1 .nav a { ... }
也就是说，上面的代码，是先查找整个页面的a标签，再对 a 标签进行遍历，判断其祖先是否匹配 .nav 。
a标签是这句css表达式的 关键选择器(key selector) 。
《编写高效的 CSS》 中直接提到：“样式系统从 关键选择器 开始匹配规则，然后左移(查找规则选择器的任何祖先元素)。只要选择器的子树(substree)一直在检查，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃。”
所以，CSS选择器的层级（匹配规则）越少，解析速度就会越快。
看下面例子：
1 .btn#search { ... } 2 .cont ul li.item { ... } 3 .cont ul li a { ... }
上面的写法，不单单影响性能，还增加了代码量。
理论上(实际还需考虑当前html的代码结构)，可以优化为：
1 /* id是唯一的 */ 2 #search { ... } 3 /* 删掉多余的标签，class和id不要被标签名锁限制 */ 4 .cont .item { ... } 5 /* 删掉多余的标签，避免层级过多影响性能，一般控制在3层级内。如有特殊需要，请用class替代 */ 6 .cont a { ... }
利用选择器分组
但大部分程序员，偷懒的时候，却用Ctrl+C & Ctrl+V 草草了事。
例如写出下面的代码：
1 .blackBtn { 2 display: inline-block; 3 font-size: 14px; 4 border-radius: 5px; 5 overflow: hidden; 6 background-color: black; 7 } 8 .redBtn { 9 display: inline-block; 10 font-size: 14px; 11 border-radius: 5px; 12 overflow: hidden; 13 background-color: red; 14 }
当然，上面的代码，我们可以整理为：
1 .blackBtn, .redBtn { 2 display: inline-block; 3 font-size: 14px; 4 border-radius: 5px; 5 overflow: hidden; 6 } 7 .blackBtn { 8 background-color: black; 9 } 10 .redBtn { 11 background-color: red; 12 }
这样不单单节省了代码，修改起来也更方便。
利用CSS的继承
这个东西，写CSS无时无刻都会用到，但不少人会忽略了它的存在。
1 .cont p { 2 font-size: 16px; 3 color: #333; 4 } 5 .cont b { 6 font-size: 14px; 7 font-weight: normal; 8 color: #333; 9 }
可以优化为：
1 .cont { 2 color: #333; 3 } 4 .cont p { 5 font-size: 16px; 6 } 7 .cont b { 8 font-size: 14px; 9 font-weight: normal; 10 }
CSS中可以被继承的属性：
更详细的，可以看一下《CSS样式表继承详解》这篇文章。
避免使用@import
关于这点，最主要的问题是：影响了css文件的并行加载和加载顺序。
《高性能网站设计：不要使用@import》 中已经谈得十分详细了，我就不多说了。
禁止使用CSS表达式
以前十分流行用纯CSS的方式来兼容IE6不支持position: fixed这个问题，这其中就用到了CSS表达式。
例如加上类似下面的代码，去兼容IE6。
1 #fixed { 2 /* other css */ 3 _position:absolute; 4 _top:expression(document.documentElement.scrollTop+300); /* 兼容ie6*/ 5 }
后来大家发现，这样做是大错特错的。还不如另外用JavaScript去兼容。
因为，CSS表达式的计算频率高得惊人！移动一下鼠标都可达到10000次以上的计算量！
所以，CSS表达式绝对是禁止使用的。
CSS代码的基本编写规范
这个点我就不细谈了。
但一些通用的规范大家还是要遵守，如良好的缩进和空格分隔。
这样有利于提高代码的可读性。
代码压缩，更轻更快
为了提高访问速度，gzip和代码压缩是少不了的。
这里推荐两个在线的压缩工具吧：
本地的话，安装YUI Compressor即可。支持JS和CSS的压缩。
最后
说实话，CSS虽然貌似很“简单”。但要把它写好，也绝不是一件简单的事情。
不少人还会强调一些「可简写」的CSS属性必须简写。 如：padding、font、background等。
的确，简写可以让代码更加简洁，可减少代码量。但我个人觉得，CSS编码中，可读性和解耦也十分重要。
所以，本文没谈到的地方还很多。仅仅对CSS编码优化的一些小技巧进行了总结。
最后后
玉伯不断强调：CSS 是一门感性的语言。
对于这点，我不完全认同。
我觉得CSS的感性，是指他可以通过各种各样的组合和方式，去实现想实现的效果。就像文字一样，我们可以用不同的句式去表达同样的意思。它并没有标准的答案，所谓的最佳实践方案，也仅仅是对于特定的场景。
参考：
https://developer.mozilla.org/zh-CN/docs/CSS/Writing_Efficient_CSS
http://css-tricks.com/efficiently-rendering-css/
http://www.qianduan.net/high-performance-web-site-do-not-use-import.html
http://www.cnphp.info/css-style-inheritance.html
本文作者：Maple Jan
本文链接：http://www.cnblogs.com/maplejan/archive/2013/05/12/3074695.html