提高网页设计CSS文件可维护性的五种方法简析(2)

3.定义你的颜色和版式

CSS 中我们无法使用常量，但是在编写颜色和版式方面的代码是我们会经常遇到可以使用很多次的类，在这里可以将之视为CSS 的常量。

网页教学网

一种可以减小CSS无常量定义确定的方法是在CSS文件顶部的注释中下一些定义，也就是定义常量。一种最简单的应用就是创建一个颜色表。这样你就可以快速的了解整个页面的色彩，从而避免一些反复修改过程中的错误。如果你需要对颜色进行修改，你也可以很快找到它。

/*------------------------------------------------------------------
# [Color codes]

# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */ 网页教学网

或者，你也可以选择描述你布局当中使用的颜色。对于一个给定的颜色，你可以将用到该颜色的块罗列出来。当然，你也可以选择按页面元素来罗列颜色。

Webjx.Com

/*------------------------------------------------------------------

Webjx.Com

[Color codes]

Background:       #ffffff (white)
Content:       #1e1e1e (light black)
Header h1:       #9caa3b (green)
Header h2:       #ee4117 (red)
Footer:              #b5cede (dark black)

a (standard):       #0040b6 (dark blue)
a (visited):       #5999de (light blue)
a (active):       #cc0000 (pink)

网页教学网

-------------------------------------------------------------------*/

对于版式有同样的例子。 Webjx.Com

/*------------------------------------------------------------------
[Typography]

Body copy:              1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:              2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea:       1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading:       1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes:       decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/

4.格式化CSS属性

网页教学网

当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：

Webjx.Com

    body,
          h1, h2, h3,
          p, ul, li,
          form {
                  border: 0;
                  margin: 0;
                  padding: 0;
           }

一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。

不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。 Webjx.Com

5.缩进会是你的朋友！

为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这