五条准则帮你写出可维护的css代码

当前位置 : 首页 > 网页制作 > 心得技巧 > 五条准则帮你写出可维护的css代码

五条准则帮你写出可维护的css代码

来源:互联网 作者:脚本宝典 时间:2015-09-04 15:03
一、在样式表开头添加一个注释块 ,用以描述这个样式表的创建日期、创建者、标记等备注信息。 复制代码 代码如下: Example Source Code: /* --------------------------------- Site: Site name Author

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

复制代码

代码如下:


Example Source Code: 
/* 
--------------------------------- 
Site: Site name 
Author: 
Updated: Date and time 
Updated by: Name 
--------------------------------- 
*/ 


二、包括公用颜色标记 

复制代码

代码如下:


Example Source Code: 
/* 
--------------------------------- 
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进行有意义的命名 
不推荐的命名方式: 
Example Source Code: 

复制代码

代码如下:


.green-box { ... } 
#big-text { ... } 


推荐使用的命名方式: 
Example Source Code: 

复制代码

代码如下:


.pullquote {... } 
#introduction {... } 


四、将关联的样式规则进行整合 
Example Source Code: 

复制代码

代码如下:


#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 { ... } 


五、给样式添加清晰的注释 
Example Source Code: 

复制代码

代码如下:


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


Tag:
网友评论

<