您当前的位置是:首页-CSS+DIV教程

教你书写可维护的CSS代码

【发表于】:2011/4/22 23:59:00  已被访问:81次
在前几天的文章中,我们讨论过书写高效CSS注意的七个方面. 

一、在样式表开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息。  

/*   
--------------------------------- 
Site: Site name  
Author: .kuzau.com
Updated: Date and time  
Updated by: Name  
---------------------------------  
*/  

二、包括公用颜色标记   

/*   
---------------------------------  
COLORS 
Body background: #def455 
Container background: #fff  
Main Text: #333  
Links: #00600f  
Visited links: #098761  
Hover links: #aaf433  
H1, H2, H3: #960  
H4, H5, H6: #000  
--------------------------------- 
*/  


三、给ID和Class进行有意义的命名  

不推荐的命名方式:  
.green-box { ... }  
#big-text { ... }  

推荐使用的命名方式: 
.pullquote {... } 
#introduction {... }  


四、将关联的样式规则进行整合  


#header { ... }  
#header h1 { ... }  
#header h1 img { ... } 
#header form { ... } 
#header a#skip { ... } 

#navigation { ... } 
#navigation ul { ... } 
#navigation ul li { ... } 
#navigation ul li a { ... } 
#navigation ul li a:hover { ... } 

#content { ... } 
#content h2 { ... } 
#content p { ... } 
#content ul { ... } 
#content ul li { ... }  

五、给样式添加清晰的注释  

/*  
---------------------------------  
header styles  
---------------------------------  
*/  
#header { ... } 
#header h1 { ... } 
#header h1 img { ... } 
#header form { ... }  

/*  
---------------------------------  
navigation styles 
---------------------------------  
*/ 
#navigation { ... } 


 

 
上下篇: 区分id与class、padding和margin、min-height和height 字距letter-spacing和word-spacing

最新推荐信息