提高css的可读性（翻译总结）

当你完成了项目后，非常可能马上就忘记了你的项目布局结构。为了在多年后仍然能够理解自己的代码你必须保证良好的代码组织结构。良好的结构降低复杂性，易于管理和维护。然而，怎么样才使良好的结构呢？下面介绍一些技巧供使用。

很多开发者创造性的使用注释和文本格式提高css代码的可读性。这些方式结合css基本语法，更具有可读性的结构，并含有更多的隐含提示信息。

本文介绍了5个技巧提高代码可管理性和可维护性。你可以把它们用到css中，也可以用到其它任何样式语言或者编程语言中。

1. 分离你的样式

按照标准把代码分成多个文件模块进行管理。所谓“标准”应该是从名字你能够一眼就看出此文件中代码的功能和作用范围。另外工程很大导致模块文件代码也很大，那么你可以进行再细分，把公共代码分离出来作为主样式表进行重用，虽然可能导致没有必要的服务请求，但是我们获得重用的好处。

看下例：第一句注明是“核心样式”。接下来是版本信息，接下来是按功能分离出来的样式文件。

/*------------------------------------------------------------------
[核心样式]

Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */


2.定义页面结构的注释。

为了便于他人和团队的浏览，理解，我们可以使用一些关键字，一些符号，定义一个页面整体结构视图。看下面的例子：通过注释结构我们就能了解布局结构。

/*------------------------------------------------------------------
[布局设计]

* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer

Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/

…或者这样:

/*------------------------------------------------------------------
[此样式的描述]

1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/


3.定义颜色和类型


定义了不易发生变化的样式之后接下来的任务就是可变或可选部分。如颜色，我们可以为颜色定义自己的颜色词典，以便快速的选择，替换。

如下面按颜色风格定义颜色字典：

/*------------------------------------------------------------------
# [关于此颜色样式风格的描述]

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


和上面例子稍有不同，我们可以按内容来定义颜色字典：

/*------------------------------------------------------------------
[关于此颜色样式风格的描述]

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

类型可以使用同样的方法。如你要定义系统的字体使用。

/*------------------------------------------------------------------
[此类型的描述]

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属性：按统一的组织方式写属性，易于团队之间相互交流。

按类型组织：

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


有些人按字母顺序组织：

body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
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; }


下面的缩进加注释表达了“修改更新”的意思：

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


注意：过多的注释和空白会导致加载速度变慢，因此我们可以使用两个版本，一个是开发版本，一个是商业版本。商业版本使用工具进行压缩。另外我们可以根据这些注释更新需求文档。