关于CSS的优化工作主要从两个方面着手

  1. 网络性能：把CSS写到字节数最少，加快下载速度 合并压缩css文件等
  2. 语法性能：优化语法 合并css语句

一、CSS压缩

就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目的

.test{
    background-color:#ffffff;
    background-image:url(a.jpg);
}

经过压缩后会变成这样：

.test{ background-color:#fff;  background-image:url(a.jpg)}

二、gzip压缩

在没有gzip压缩的情况下，Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器， 而支持gzip的Web服务器将把文件压缩后再发给浏览器，浏览器（支持gzip）在本地进行解压和解码，并显示原文件。 这样大约可以减少70％以上的文件大小，达到网络性能优化的目的。 gzip压缩需要服务器的支持，所以我们需要在服务器端进行配置。

三、合写CSS属性

合并font margin/padding background border transform animation等属性的单个属性

四、利用继承

CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了

五、模块化css 利用缓存

有的页面只会用一个Dialog、有的页面只用到了一个TreeView把css模块化按需加载 还可以单独缓存

模块化后CSS的http请求会增加，为了减少http请求可以使用combo服务。

六、CSS放在head中，减少repaint和reflow

浏览器从上到下一边下载html生成DOM tree，一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。

  • reflow：当DOM元素出现隐藏／显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面，之前渲染工作白费了

  • repaint：当元素的背景颜色、边框颜色变化虽然不会引起reflow的变化但是会让浏览器重新渲染该元素。所以我们应该在开始就定义好属性，不让浏览器重复渲染。

七、避免适用通配符或隐式通配符

body * {padding:0;margin:0;} 这是对body的子结点都设置一些属性，但因为CSS继承特性的原因，页面所有元素都会接受这个规则，对于复杂的页面在性能上的影响还是很大的，这并不是说不能使用通配符，而是说使用的时候要注意范围。

一些隐式的通配符 :visible{ padding:0; } 这样的几乎就和通配符一样，在使用的时候一定要注意范围限制问题

八、避免层级或过度限制的CSS

CSS是从右到左解析的

不要用标签或 class 来限制 ID 规则 这个应该是个常识，#test.info或者div#test这样的选择器是画蛇添足，id已经可以唯一而且最快的定位一个元素了

不要用标签名限制 class 规则 这个估计被误用的更多，如div.info这样的写法，其实我们可以直接写为.info，从右到左解析的原因可以知道为什么其低效，如果直接使用class不能达到目的，一般情况下应该是class设计的有问题，CSS需要重构了

尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器 这三条规则是想通的，因为从左到右解析关系，在CSS选择器中后代选择器非但没有帮我们加快CSS查找，反而后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中，建议是当使用子选择器时要十分谨慎，能免则免。对此我们可以通过具体类别——使用单一或尽量少的class解决。