css代码优化总结

如何写出精简高效的css代码是每一个web前端人员的夙愿。那么，为什么要做css优化呢？

Css优化能够使css文件更易读，减少网站维护成本，减小css文件的大小能够相对的加快浏览器的加载速度，节约带宽，增强用户体验。

Css优化，我们主要从以下几个方面进行：

1. 语义化html代码。 

2. 样式重写（css reset）。 

3. 公用样式(base css)。 

4. Css瘦身尽可能的缩小样式文件的大小。 

5. 易读性。

6. 注意事项。

 

一、语义化html代码

     使用语义化标签布局，将css、javascrpt和html分离，html主管布局结构，css主管表现，javascript主管行为，使用有意义的命名代码，良好的命名对搜索引擎更友好。 例如：

<h1>My name is <span class="red blod">Wiky</span></h1>

从字面上看意为“红色，粗体”

.red{color:red;}
.bold{font-weight:bold;}

问题来了，如果要将字体改为蓝色，那么，就得修改样式为

.red{color:blue;}

看上去怪怪的。我们可以将其命名为class=”name”

.name{color:red;font-weight:bold;}

这样更容易理解，同时当需要修改的时候也很方便。不用去改html。

所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...} 这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

二、样式重写css reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

*{margin:0;padding:0;}

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:  

/** 清除内外边距 **/ 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 
pre, /* text formatting elements 文本格式元素 */ 
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 
th, td, /* table elements 表格元素 */ 
img/* img elements 图片元素 */{ 
  margin: 0; 
  padding: 0; 
 } 
/** 设置默认字体 **/ 
body{ 
 font: 100%/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6,address,cite,dfn,var,em,i{font-style:normal;} 
 /** 重置列表元素 **/ 
 ul, ol { list-style: none; } 
 /** 重置超链接元素 **/ 
 a { text-decoration: none; color:#333;} 
 a:hover { text-decoration: underline; color:#F40; } 
 /** 重置图片,锚元素 **/ 
 Img,a{ border:0 none;} 
 /** 重置表格元素 **/ 
 table { border-collapse: collapse;} 

三、公用样式（base css）

我们将一些常用的样式提取出来作为公用样式，以便调用。

.clear{clear:both;height:0;line-height:0;}/*用来清除浮动*/
.fl{float:left;}/*左浮动*/
.fr{float:right;}/*右浮动*/
.fwb{font-weight:bold;}/*粗体*/
.tl{text-align:left;}/*文字居左*/
.tc{text-align:center;}/*文字居中*/
.tr{text-align:right;}/*文字居右*/

当然你可以根据具体需要提炼出更多通用的属性作为公用样式。

四、Css瘦身，尽可能的缩小样式文件的大小。

1.代码缩写

      CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写

的属性，包括margin，padding，border，font，background和颜色值等。

2.利用css继承

      如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。 例如：

#container li{ font-family:Georgia, serif; } 
#container p{ font-family:Georgia, serif; } 

可以简写成：

#container{font-family:Georgia, serif; } 

3.使用多重选择器 

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：  

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 

可以合并为：

h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 

五、保持代码的易读性。

1.适当的代码注释，

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。

2.保持CSS的可读性 

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。 

/*** 每个样式属性写一行 ***/ 
div{ 
background-color:#3399cc; 
color:#666; 
font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
height:300px; 
margin:10px 5px; 
padding:5px 0 10px 5px; 
width:30%; 
z-index:10; 
} 
 
/*** 所有的样式属性写在同一行 ***/ 
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; } 

当对于一些样式属性较少的选择器，我会写到一行： 

/*** 选择器属性少的写在同一行 ***/ 
div{ background-color:#3399cc; color:#666;} 

对于这个规则并非硬性规定，但无论采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。 

3.给你的CSS代码排序 

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速: 

/*** 样式属性按字母排序 ***/ 
div{ 
background-color:#3399cc; 
color:#666; 
font:1.2em/1.4em Arial, Helvetica, sans-serif; 
height:300px; 
margin:10px 5px; 
padding:5px 0 10px 5px; 
width:30%; 
z-index:10; 
} 

六、需要注意的地方

1.使用<link>代替@import 

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。所以，请避免使用@import 

2.使用外部样式表 

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中： 

<style type="text/css" > 
#container{ .. } 
#sidebar{ .. } 
</style> 

或 

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " > 

而是使用<link>导入外部样式表： 

<link rel="stylesheet" type="text/css" href="css/styles.css" /> 

3.避免使用CSS表达式（Expression） 

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色： 

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); 

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。 表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以

跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。 

4.选择更优的样式属性值 

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如 区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。 而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none; 同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。 

5.代码压缩 

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩代码，可以采用一些工具，如YUI Compressor 利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。 

以上有自己多年工作的积累也有对同行的认同，关于css的优化没有最好，只有更好。