CSS 书写规范和注意事项

CSS 书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.example {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  background: #fff;
  border-radius: 10px;
}

CSS 注意事项（编写规范）

注释

1. 每个文件的开头前都必须添加注释，并说明文件内容
2. 易于混淆的属性，也必须添加注释

选择器命名规范

1. 只能使用小写字母命名
2. 包含多个单词的选择器中间使用分隔符间隔。如：select-with-multiple
3. 禁止使用 ID 为元素添加样式，应该使用类
4. 用 JS 修改样式，（不论使用什么框架），都必须通过增加或者删除 css 类的方式来完成（不能直接修改元素的样式）
5. 用作 JS 选择器的类和 ID，必须添加 js-前缀，并严禁在样式表中使用
6. 必须使用有意义的类名
7. 类名必须描述为什么元素添加样式，而不是怎样添加样式

属性

1. 属性的简写只可使用 border、margin、padding。（font 不可以使用）
2. 属性值为 0 时，必须省略单位