首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么书写可维护的CSS代码

2012-11-04 
如何书写可维护的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?{?...?}?


  

热点排行