高效整洁CSS代码原则 (上)

CSS是一组格式设置规则，用于控制Web页面的外观。经过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。本文呢主要介绍了如何实现高效整洁的CSS代码原则，但愿对你有帮助，一块儿来看。

AD：

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不一样的人在CSS书写风格上稍有不一样，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：

1. 使用Reset但并不是全局Reset

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

   
 
 
    
{ margin:; padding:; } 
 

   

这不单单由于它是缓慢和低效率的方法，并且还会致使一些没必要要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的作法。

   
 
 
    
/** 清除内外边距 **/ 
 
 
    
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 图片元素 */{  
 
 
    
border:medium none;  
 
 
    
margin: ;  
 
 
    
padding: ;  
 
 
    
}  
 
 
    
/** 设置默认字体 **/ 
 
 
    
body,button, input, select, textarea {  
 
 
    
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }  
 
 
    
h1, h2, h3, h4, h5, h6 { font-size: 100%; }  
 
 
    
em{font-style:normal;}  
 
 
    
/** 重置列表元素 **/ 
 
 
    
ul, ol { list-style: none; }  
 
 
    
/** 重置超连接元素 **/ 
 
 
    
a { text-decoration: none; color:#333;}  
 
 
    
a:hover { text-decoration: underline; color:#F40; }  
 
 
    
/** 重置图片元素 **/ 
 
 
    
img{ border:0px;}  
 
 
    
/** 重置表格元素 **/ 
 
 
    
table { border-collapse: collapse; border-spacing: ; } 
 

   

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

   
 
 
    
.aaabb{margin:2px;color:red;} 
 

   

我想即便是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码一样是颇有问题的：

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

   

问题在于若是你须要把全部本来红色的字体改为蓝色，那修改后就样式就会变成：

   
 
 
    
.red{color:bule;} 
 

   

这样的命名就会很让人费解，一样的命名为.leftBar的侧边栏若是须要修改为右侧边栏也会很麻烦。因此，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您能够选择意义的命名如：

   
 
 
    
#navigation{...}  
 
 
    
.sidebar{...}  
 
 
    
.postwrap{...} 
 

   

这样，不管你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

另外还有一种状况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担心刚刚说的那种状况，如

   
 
 
    
.alignleft{float:left;margin-right:20px;}  
 
 
    
.alignright{float:right;text-align:right;margin-left:20px;}  
 
 
    
.clear{clear:both;text-indent:-9999px;} 
 

   

那么对于这样一个段落

   
 
 
    
<p class="alignleft">我是一个段落！</p> 
 

   

若是须要把这个段落由原先的左对齐修改成右对齐，那么只须要修改它的className就为alignright就能够了。

3. 代码缩写

CSS代码缩写能够提升你写代码的速度，精简你的代码量。在CSS里面有很多能够缩写的属性，包括margin，padding，border，font，background和颜色值等，若是您学会了代码缩写，本来这样的代码：

   
 
 
    
li{  
 
 
    
font-family:Arial, Helvetica, sans-serif;  
 
 
    
font-size: 1.2em;  
 
 
    
line-height: 1.4em;  
 
 
    
padding-top:5px;  
 
 
    
padding-bottom:10px;  
 
 
    
padding-left:5px;  
 
 
    
} 
 

   

就能够缩写为：

   
 
 
    
li{  
 
 
    
font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
 
 
    
padding:5px 0 10px 5px;  
 
 
    
} 
 

   

4. 利用CSS继承

若是页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你能够很好的维护你的代码，而且还能够减小代码量。那么原本这样的代码：

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

   

就能够简写成：

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

   

5. 使用多重选择器

你能够合并多个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; }