怎么书写可维护的CSS代码
如何书写可维护的CSS代码本文转载:www.52css.com?? ??? 在前几天的文章中,我们讨论过书写高效CSS注意的七
如何书写可维护的CSS代码
本文转载:www.52css.com
??
??? 在前几天的文章中,我们讨论过书写高效CSS注意的七个方面。今天我们讨论如何书写可维护的CSS代码?
一、在样式表开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息。
?Example Source Code [www.52css.com]/*?
---------------------------------
Site:?Site?name?
Author:?52CSS.com
Updated:?Date?and?time?
Updated?by:?Name?
---------------------------------?
*/?
二、包括公用颜色标记?
?Example Source Code [www.52css.com]/*?
---------------------------------?
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 [www.52css.com]不推荐的命名方式:
.green-box?{?...?}?
#big-text?{?...?}?
推荐使用的命名方式:
.pullquote?{...?}
#introduction?{...?}?
四、将关联的样式规则进行整合?
?Example Source Code [www.52css.com]#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 [www.52css.com]/*
---------------------------------?
header?styles?
---------------------------------?
*/?
#header?{?...?}
#header?h1?{?...?}
#header?h1?img?{?...?}
#header?form?{?...?}?
/*?
---------------------------------?
navigation?styles
---------------------------------?
*/
#navigation?{?...?}?