css优化的几点建议

浏览数：74 / 时间：2015年06月09日

写了太久的css，从来没有总结过，所有有必要总结一下css的代码优化方式。

第一：在css外联文件上传到服务器前，压缩css文件，可以使用网上的一些css压缩工具。这样做的好处是，当我们在css的时候，为了代码的可读性跟可维护性，多出来了很多空格。这样的话，浏览器解析css时候，会多一部分精力来去除这些空格，造成时间上的浪费，所以有必要用压缩工具把这些空格去掉，最小化css文件。

第二：使用简写方式。如果要同时改变字体大小，行高，粗体。各自的属性有，font-size,font-weight,line-height.我们可能为每个属性去赋值，但是我们可以这样做

font:bold 12px/20px "微软雅黑"；这样写是最好，因为大大的减少了代码量。同样有margin、padding、border、background等...

第三：尽量使用css外联文件，少使用内联和内嵌样式。如果使用内联样式的话，一方面有相同样式的标签都要加等量代码的样式，另外一方面权重比较大，外联样式要覆盖的话需要在属性后面加important。内嵌样式的话，我觉得对性能没有什么大碍，主要提到外联文件里是因为便于维护，如果有需要修改的地方，可以去分类好的相应样式表里面修改，不必要老是在html文件里面修改，另外可能是因为html文件是最先加载的，提出去html代码量减少了。（值得注意的是：不要把带有style的内嵌样式加在body标签中，因为这样的话style会被解析两次，第一次是在构建dom时，第二次是渲染样式时）。

第四：少使用hack。从网上看到，为了不同的浏览器写不同的样式，会添加更多的代码量，让css文件变得更加冗余。有更好的解决方法就是，使用条件注释方式，如：

<!–[if IE 8]>
<link rel=”stylesheet” type=”text/css” href=”ie8.css”>
<![endif]–>

这样写的话，如果打开的浏览器不是ie或者不是ie8，因为不是识别注释条件，所以会忽略这段代码，从而不加载ie8.css。这样就可以正对ie8写专属代码了。不过对于ie8来说，它需要牺牲的就是多了一个http请求。

第五：使用雪碧图。这个优化其实属于图片的优化，但是它也更css有关，把很多小图标合并到一张图片里面，这样减少了很多http请求，然后通过css来控制这张雪碧图的哪个坐标定位在页面上自己想要的位置。不过使用的是小图标，也即页面中装饰的图片。

第六：css文件中代码多注释。为了可读性，可维护性，更以后能看的懂文件的组织逻辑，就要在代码中多注释。

第七：class跟id的合理使用。important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承，class的权重为10，id的权重为100，所以想要用class覆盖id的话需要写10个，而且还要放在id选择器下面。当有共同样式布局的标签时，尽可能使用class，当要标志一个标签的独一无二的时候，使用id。

第八：避免使用 expression 和 behavior。在页面渲染的过程中， expression 和 behavior 需要大量的计算，会大量地耗费客户端资源。所以不到迫不得已，请不要使用 expression 和 behavior 。可以式javascript代替处理相应的问题。