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
# */

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

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

[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)

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

对于版式有同样的例子。

/*------------------------------------------------------------------
[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代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：

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

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

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

5.缩进会是你的朋友！

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

#main-column { display: inline; float: left; width: 30em; }
                    #main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
                    #main-column p { color: #333; }

同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如"@new"）来做一个标识。

#sidebar ul li a {
       display: block;
       background-color: #ccc;
            border-bottom: 1px solid #999; /* @new */
       margin: 3px 0 3px 0;
            padding: 3px; /* @new */
}

总的来说，只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你理解文件没有帮助的样式指南，避免对过多的元素使用过多的样式指南。然后，为了一个可读性可维护性良好的CSS文件而努力吧。

经典论坛交流：
http://bbs.blueidea.com/thread-2851763-1-2.html

本文链接：http://www.blueidea.com/tech/web/2008/5740.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 提高CSS代码的可读性 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。