1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。

2，减少css嵌套，最好不要套三层以上。

3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。

4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些必须 的东西是不能少的。

6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。

7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。

8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。

9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize.css

10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。

11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，

12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

优化主要还是朝网络传输方面和减少不必要的渲染考虑

1.发布前压缩CSS，减少数据传输量。

2.合并属性，如margine-left:5px;margine-top:10px 这个就可以合并成一条的。

3.合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。

4.减少低效代码的使用，如滤镜，express表达式，!import引入。

5.其它技术，如CSS SPRITE等。

ps:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

加载性能：

1 css压缩：将写好的css进行打包压缩，可以减少很多的体积；

2 css单一样式：当需要下边距和左边距的时候，

很多时候选择：margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;执行的效率更高；

3 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者 是等待页面加载完成之后再进行加载;

选择器性能：

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

**避免使用通配规则**

如*{} 计算次数惊人！只对需要用到的元素进行选择

**尽量少的去对标签进行选择，而是用class**

如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}

**不要去用标签限定ID或者类选择符**

如：ul#nav,应该简化为#nav

**尽量少的去使用后代选择器，降低选择器的权重值**

后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素

**考虑继承**

了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

加载性能：

1 css压缩：将写好的css进行打包压缩，可以减少很多的体积；

2 css单一样式：当需要下边距和左边距的时候，

很多时候选择：margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;执行的效率更高；

3 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者 是等待页面加载完成之后再进行加载;

选择器性能：

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

**避免使用通配规则**

如*{} 计算次数惊人！只对需要用到的元素进行选择

**尽量少的去对标签进行选择，而是用class**

如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}

**不要去用标签限定ID或者类选择符**

如：ul#nav,应该简化为#nav

**尽量少的去使用后代选择器，降低选择器的权重值**

后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素

**考虑继承**

了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

渲染性能：

1.慎重使用高性能属性：浮动、定位；

2.尽量减少页面重排、重绘；

重排按照css的书写顺序：

·位置：positon、top、left、z-index、float、dispay

·大小：width、height、margin、padding

·文字系列： font、line-height、color、letter-spacing

·背景边框：background、 border

·其它：anmation、transition

重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;

3.去除空规则：｛｝；

4.属性值为0时，不加单位；

5.属性值为浮动小数0.**，可以省略小数点之前的0；

6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；

7.不使用@import前缀，它会影响css的加载速度；

8.充分利用css继承属性，减少代码量；

9.抽象提取公共样式，减少代码量；

10.选择器优化嵌套，尽量避免层级过深；

11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;

12.将css文件放在页面最上面

可维护性、健壮性：

1 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；

2 继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class="btn btn-active btn-blue"；

3 样式与内容分离：讲css代码定义到外部css中；

4 容器与样式分离；