# 通用 CSS 笔记、建议与指导
?
---
?
在参与规模庞大、历时漫长且人手众多的项目时，所有开发者遵守如下规则极为重要：
?
+ **保持 CSS 的可维护性**
+ **保持代码清晰易懂**
+ **保持代码的可拓展性**
?
为了实现这一目标，我们要采用诸多方法。
?
本文档第一部分将探讨语法、格式以及 CSS 分析；第二部分将从方法论、思维框架以及编写与规划 CSS 的态度入手。
?
## 目录
?
* CSS 文档分析
? * 总览
? * 单一文件与多文件
? * 目录
? * 章节标题
* 代码顺序
* 规则解析
* 命名规范
? * JavaScript 钩子
? * I18n
* 注释
? * 注释的拓展用法
? ? * 准修饰选择器
? ? * 代码标签
? ? * 继承标记
* 编写 CSS
* 添加新部分
* 面向对象 CSS
* 布局
* 界面尺寸
? * 字号调节
* 简写
* IDs
* 选择器
? * 过修饰选择器
? * 选择器性能
* 选择器继承
* `!important`
* 魔数与绝对比例
* 条件判断
* Debugging
* 预处理
?
?
?
---
?
## CSS 文档分析
?
无论编写什么文档，我们都应当尽力维持统一的风格，包括统一的注释、统一的语法与统一的命名规范。
?
### 总则
?
尽量将行宽控制在 80 字节以下。渐变（gradient）相关的语法以及注释中的 URL 等可以算作例外，毕竟这部分我们也无能为力。
?
我倾向于用 4 个空格而非 Tab 缩进，并且将声明拆分成多行。
?
### 单一文件与多文件
?
有些人喜欢将样式写成一个大文件，这并不赖，而且如果你按照下文的规则来编写的话也不会遇到什么问题。我在迁移至 Sass 之后，开始将样式拆分成众多小文件。这也不赖。无论你采用什么方式，下文中的规则都将适用。这两种写法仅仅在目录以及区块标题上有所差异。
?
### 目录
?
在 CSS 的开头，我会写一份目录，例如：
?
? ? /*------------------------------------*\
? ? ? ? $CONTENTS
? ? \*------------------------------------*/
? ? /**
? ? ?* CONTENTS............You’re reading it!
? ? ?* RESET...............Set our reset defaults
? ? ?* FONT-FACE...........Import brand font files
? ? ?*/
?
这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。
?
如果你在维护一份规模较大的单文件 CSS，对应的区块将也在同一文件中。如果你是在编写一组小文件，那么目录中的每一项应当对应相应的 @include 语句。
?
### 区块标题
?
目录应当对应区块的标题。请看如下示例：
?
? ? /*------------------------------------*\
? ? ? ? $RESET
? ? \*------------------------------------*/
?
区块标题前缀 `$` 可以让我们使用（[Cmd|Ctrl]+F）命令查找 `$[SECTION-NAME]`，同时 **将搜索范围限制在区块标题中**。
?
如果你在维护一份大文件，那么在区块之间空 5 行，如下：
?
? ? /*------------------------------------*\
? ? ? ? $RESET
? ? \*------------------------------------*/
? ? [Our
? ? reset
? ? styles]
? ??
? ??
? ??
? ??
? ??
? ? /*------------------------------------*\
? ? ? ? $FONT-FACE
? ? \*------------------------------------*/
?
在大文件中快速翻动时这些大块的空档有助于区分区块。
?
如果你在维护多份、以 @include 连接的 CSS 的话，在每份文件头加上标题即可，不必这样空行。
?
## 顺序
?
尽量按照特定顺序编写规则，这将确保你充分发挥 CSS 缩写中第一个 <i>C</i> 的意义：cascade，层叠。
?
一份规划良好的 CSS 应当按照如下排列：
?
1. **Reset** 万物之根源
2. **元素类型** 没有设置 class 的 `h1`、`ul` 等
3. **对象以及抽象内容** 最一般、最基础的设计模式
4. **子元素** 由对象延伸出来的所有拓展及其子元素
5. **修补** 针对异常状态
?
如此一来，当你依次编写 CSS 时，每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部分，减少某些特殊的问题，构成设计更理想的 CSS 结构。
?
关于这方面的更多信息，强烈推荐 Jonathan Snook 的 [SMACSS](http://smacss.com)。
?
## CSS 规则集分析
?
? ? [selector]{
? ? ? ? [property]:[value];
? ? ? ? [<- Declaration ->]
? ? }
?
? ? [选择器]{
? ? ? ? [属性]:[值];
? ? ? ? [<- 声明 ->]
? ? }
?
编写 CSS 样式时，我习惯遵守这些规则：
?
* class 名称以连字符（-）连接，除了下文提到的 BEM 命名法；
* 缩进 4 空格；
* 声明拆分成多行；
* 声明以相关性顺序排列，而非字母顺序；
* 有前缀的声明适当缩进，对齐其值；
* 缩进样式从而反映 DOM；
* 保留最后一条声明结尾的分号。
?
例如：
?
? ? .widget{
? ? ? ? padding:10px;
? ? ? ? border:1px solid #BADA55;
? ? ? ? background-color:#C0FFEE;
? ? ? ? -webkit-border-radius:4px;
? ? ? ? ? ?-moz-border-radius:4px;
? ? ? ? ? ? ? ? bor
