CSS 规范

不能写得一手好字是一个遗憾。不能写得一手好看的代码更是一种遗憾。——致青春

1. 为选择器分组时，将单独的选择器单独放在一行.

2. 为了代码的易读性，在每个声明块的左花括号前添加一个空格.

3. 声明块的右花括号应当单独成行.

4. 每条声明语句的 : 后应该插入一个空格.

5. 所有声明语句都应当以分号结尾并且应该独占一行.

6. 避免为 0 值指定单位.

7. 为选择器中的属性添加双引号，例如，input[type="text"].

8. 尽量使用简写形式的十六进制值并且十六进制值应该全部小写.

9. 不要使用@import、!important

10. 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑

11. 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行

12. 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3层

13. class 名称中只能出现小写字符和破折号，不是下划线，也不是驼峰命名法

14. 代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称

15. 以组件为单位组织代码块

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */