css代码优化

一、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; }

巴特西

css代码优化

最新文章

热门文章