
一、CSS代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。
二、需要优化css代码地方:
1、缩写css代码。(例如backgroun,margin,padding,border,font等)
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化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代码,减少文件大小,以获得更高的加载速度。
四、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }