1.CSS压缩
不用了
2.gzip压缩
Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台，这个不止是对CSS，当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小（这取决于文件中的内容）。
3.合写CSS
.test{
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;
}
.test{
background: #000 url(image.jpg) top left no-repeat;
}
4.利用继承
CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了
所有元素可继承：visibility和cursor
内联元素和块元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
5.抽离、拆分CSS，不加载所有CSS
抽离CSS是指把一些通用的CSS放到一个文件内，而不是写道各个页面，这样一次下载后，其它页面用到的时候就可以利用缓存了，减少不必要的重复下载。
6.CSS sprites
这个其实算不上是CSS优化，应该说是web优化用到了CSS的技巧
7.CSS放在head中，减少repaint和reflow
浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。
类似的知道了这个也应该在脚本中注意尽量减少repaint和reflow，什么情况会导致这两种情况呢
reflow：当DOM元素出现隐藏／显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面，之前渲染工作白费了
repaint：当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以接受，但如果我们在开始就定义好了，不让浏览器重复工作就更好了。
8.不用CSS表达式
这样我们赋予了CSS类似JavaScript的功能，CSS表达式非常强大，甚至可以使用CSS表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类，看起来能解决很多IE下的浏览器兼容性等问题，但是副作用很大，CSS规则并不是只运行一次，为了确保有效，CSS表达式会进行频繁的求值，当改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响。
9.不乱用CSS reset或属性设置
在网站建设中我们经常使用一些CSS reset，达到跨浏览器统一的目的，但是很多时候我们的CSS reset过于臃肿，主要有两个问题
- 把很多浏览器对元素的默认属性有设置了一边，比如div的padding和margin为0啊什么的，这是没有必要的
- 把一些很不常用的元素的设置也写进了CSS reset，如 ruby这样的元素
10.避免适用通配符或隐式通配符
CSS中的*代表通配符，虽然好用如果使用不当很麻烦
body * {padding:0;margin:0;}
这虽然对body的子结点都设置一些属性，但因为CSS继承特性的原因，页面所有元素都会接受这个规则，对于复杂的页面在性能上的影响还是很大的，这并不是说不能使用通配符，而是说使用的时候要注意范围。
这样的几乎就和通配符一样，在使用的时候一定要注意范围限制问题
11.避免层级或过度限制的CSS
前提是得知道CSS是从右到左解析的，而不是我们认为的从左到右，关于为什么这样做肯定是因为高效，不明就里的同学可以
不要用标签或 class 来限制 ID 规则
不要用标签或 class 来限制 ID 规则
这个应该是个常识，但很多同学都会误用，写出#test.info或者div#test这样的选择器，这个只能说是画蛇添足，id已经可以唯一而且最快的定位一个元素了
不要用标签名限制 class 规则
这个估计被误用的更多，如div.info这样的写法，其实我们可以直接写为.info，从右到左解析的原因可以知道为什么其低效，如果直接使用class不能达到目的，一般情况下应该是class设计的有问题，CSS需要重构了
尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器
这三条规则是想通的，因为从左到右解析关系，在CSS选择器中后代选择器非但没有帮我们加快CSS查找，反而后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中，作者给的建议是当使用子选择器时要十分谨慎，能免则免。其开销可见一斑了。
对此我们可以通过具体类别——使用单一或尽量少的class解决。
网友评论