怎么书写可维护的CSS代码
日期：2014-05-17 浏览次数：20778 次
如何书写可维护的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?
---------------------------------?
*/?
---------------------------------
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?
---------------------------------
*/
---------------------------------?
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?{...?}?
.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?{?...?}?
#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?{?...?}?
---------------------------------?
header?styles?
---------------------------------?
*/?
#header?{?...?}
#header?h1?{?...?}
#header?h1?img?{?...?}
#header?form?{?...?}?
/*?
---------------------------------?
navigation?styles
---------------------------------?
*/
#navigation?{?...?}?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
