CSS 文档分析

无论编写什么文档，我们都应当维持统一的风格，包括统一的注释、统一的语法与统一的命名规范。

总则

将行宽控制在 80 字节以下。渐变（gradient）相关的语法以及注释中的 URL 等可以算作例外，毕竟这部分我们也无能为力。

我倾向于用 4 个空格而非 Tab 缩进，并且将声明拆分成多行。

单一文件与多文件

有人喜欢在一份文件文件中编写所有的内容，而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。无论你选择哪种，下文的规则都将适用，而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在于目录以及区块标题：

目录

在 CSS 的开头，我会维护一份目录，就像这样：

  1. /*------------------------------------*\
  2.     $CONTENTS
  3. \*------------------------------------*/
  4. /**
  5.  * CONTENTS............You’re reading it!
  6.  * RESET...............Set our reset defaults
  7.  * FONT-FACE...........Import brand font files
  8.  */

这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。

如果你在维护一份单文件 CSS，对应的区块将也在同一文件中。如果你是在编写一组小文件，那么目录中的每一项应当对应相应的 @include 语句。

区块标题

目录应当对应区块的标题。如下：

  1. /*------------------------------------*\
  2.     $RESET
  3. \*------------------------------------*/

区块标题前缀 $ 可以让我们使用 [Cmd|Ctrl]+F 命令查找标题名时将搜索范围限制在区块标题中。

如果你在维护一份大文件，那么在区块之间空 5 行，如下：

  1. /*------------------------------------*\
  2.     $RESET
  3. \*------------------------------------*/
  4. [Our
  5. reset
  6. styles]
  12. /*------------------------------------*\
  13.     $FONT-FACE
  14. \*------------------------------------*/

在大文件中快速翻动时这些大块的空档有助于区分区块。

如果你在维护多份以 include 连接的 CSS 的话，在每份文件头加上标题即可，不必这样空行。