css代码优化

1、CSS代码优化做用与意义

 

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

 

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

 

三、让本身写的css代码更加专业。

 

2、须要优化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有微妙的速度优点）。