CSS的一些编程规范总结

在参与规模庞大、历时漫长且参与人数众多的项目时，所有开发者遵守如下规则极为重要：

    保持 CSS 易于维护
    保持代码清晰易懂
    保持 CSS 的可拓展性

　　为了实现这一目标，我们要采用诸多方法。

　　本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法。
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]   
7.   
8.   
9.   
10.   
11.   
12. /*------------------------------------*\  
13.     $FONT-FACE  
14. \*------------------------------------*/  

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

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

　　尽量按照特定顺序编写规则，这将确保你充分发挥 CSS 中第一个 C 的意义：cascade，层叠。

　　一份规划良好的 CSS 应当按照如下排列：

    Reset 万物之根源
    元素类型 没有 class 的 h1、ul 等
    对象以及抽象内容 最一般、最基础的设计模式
    子元素 由对象延伸出来的所有拓展及其子元素
    修补 针对异常状态

　　如此一来，当你依次编写 CSS 时，每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部分，减少某些特殊的问题，组成更理想的 CSS 结构。

　　关于这方面的更多信息，强烈推荐 Jonathan Snook 的 SMACSS。
　CSS 样式集分析

1. [selector]{   
2.     [property]:[value];   
3.     [<- Declaration ->]   
4. }   
5.   
6. [选择器]{   
7.     [属性]:[值];   
8.     [<- 声明 ->]   
9. }   

　　编写 CSS 样式时，我习惯遵守这些规则：

    class 名称以连字符（-）连接，除了下文提到的 BEM 命名法；
    缩进 4 空格；
    声明拆分成多行；
    声明以相关性顺序排列，而非字母顺序；
    有前缀的声明适当缩进，从而对齐其值；
    缩进样式集从而反映 DOM；
    保留最后一条声明结尾的分号。

　　例如：

1. .widget{   
2.     padding:10px;   
3.     border:1px solid #BADA55;   
4.     background-color:#C0FFEE;   
5.     -webkit-border