css代码优化

一、CSS代码优化作用与意义

 

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，加快网页打开速度。

 

2、简化和标准化css代码，便于日后维护。

 

3、让自己写的css代码更加专业。

 

二、需要优化css代码地方：

1. 使用Reset但并非全局Reset。不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset。

 

2. 良好的命名习惯。

 

3. CSS代码缩写。可以提高写代码的速度，精简代码量。在CSS里面有不少可以缩写的属性，包括 margin， padding， border ，font ，background 和颜色值等。

 

4. 利用CSS继承。如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。可以很好的维护代码，减少代码量。

 

5. 使用多重选择器。如果他们有共同的样式，可以合并多个CSS选择器为一个。这样做不但代码简洁，且可以节省时间和空间。

 

6. 适当的代码注释。代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。

 

7. 保持CSS的可读性。书写可读的CSS将会使得更容易查找和修改样式。

 

8. 使用外部样式表。不单更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

9. 避免使用CSS表达式（Expression）。表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

 

10. 代码压缩。当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，除去注释和空格，以使得网页加载得更快。采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

 

11.不要在ID选择器和class选择器前使用标签名。例如：div.box { color: #f00; }; 直接 可以 用类名， .box { color:#f00;}  这样浏览器找到这个class后就不用再匹配是否存在div标签，从而提高了渲染效率。

 

12.css的层级关系不要太深。用class直接代替多余的层级元素。

 

13.平铺背景图片不要过小，影响渲染速率。

 

14. 少用滤镜，少用hack，少用position：absolute；float使用要谨慎。

 

15.合理化布局（模块化布局）。可以把样式划分基类和扩展类 ，模块基本相同的样式写在基类里，不同的再重新用class来定义称为扩展类 。

 

16. 在css渲染效率中id和class的效率是基本相当的 。class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。