如何书写可维护的CSS代码

本文转载：www.52css.com

在前几天的文章中，我们讨论过书写高效CSS注意的七个方面。今天我们讨论如何书写可维护的CSS代码？

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

Example Source Code [www.52css.com]

/*
---------------------------------
Site:Sitename
Author:52CSS.com
Updated:Dateandtime
Updatedby:Name
---------------------------------
*/

　　二、包括公用颜色标记

Example Source Code [www.52css.com]

/*
---------------------------------
COLORS
Bodybackground:#def455
Containerbackground:#fff
MainText:#333
Links:#00600f
Visitedlinks:#098761
Hoverlinks:#aaf433
H1,H2,H3:#960
H4,H5,H6:#000
---------------------------------
*/

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

Example Source Code [www.52css.com]

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

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

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

Example Source Code [www.52css.com]

#header{...}
#headerh1{...}
#headerh1img{...}
#headerform{...}
#headera#skip{...}

#navigation{...}
#navigationul{...}
#navigationulli{...}
#navigationullia{...}
#navigationullia:hover{...}

#content{...}
#contenth2{...}
#contentp{...}
#contentul{...}
#contentulli{...}

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

Example Source Code [www.52css.com]

/*
---------------------------------
headerstyles
---------------------------------
*/
#header{...}
#headerh1{...}
#headerh1img{...}
#headerform{...}

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