写了太久的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代替处理相应的问题。
第九:使用seo的css。可以借鉴下http://www.chinaz.com/web/2008/0109/21784.shtml