css解析速度及编写注意事项

CSS解析速率表：

不同的 CSS 选择器的组合，解析速度也会受到不同的影响

那么如何编写CSS代码，来提高效率，这里需要注意几点：

1、使用 id selector 非常的高效。在使用 id selector 的时候需要注意一点：因为 id 是唯一的，所以不需要既指定 id 又指定 tagName，虽然这样写也没问题，但是会增加CSS编译与解析时间：

Bad
p#id1 {color:red;}  
Good  
#id1 {color:red;}

2、避免深层次的 node ，譬如：

Bad  
div > div > div > p {color:red;} 
Good  
p-class{color:red;}

3、慎用 ChildSelector ；

4、不到万不得已，不要使用 attribute selector，如：p[att1=”val1”]。这样的匹配非常慢。更不要这样写：p[id=”id1”]。这样将 id selector 退化成 attribute selector。

Bad  

p[id="id1"]{color:red;}  
p[class="class1"]{color:red;}  

Good 
#id1{color:red;}  
.class1{color:red;}

5、理解依赖继承，如果某些属性可以继承，那么自然没有必要在写一遍；

6、规范真的很重要，不仅仅是可读性，也许会影响你的页面性能。

文章参考自：http://nec.netease.com/standard/css-sort.html（感谢）