选择器命名

• 使用有意义的名称, 命名尽量简明知意, 尽量使用能反应元素目的的选择器名称
• 如无必要, 尽量使用短的选择器名称.
• 不要使用 id 定义样式
• 不要把选择器限定到一个特定的元素上(div.selector)
• 不要使用 标签作为选择器, 选择器性能问题
• 使用 id 作为钩子, 最好不要使用 class 最为 js 的钩子
• 如果使用 class 作为 js 钩子, 不要在上面定义样式; 使用单独的 class. 以 j- 开头, 如: .j-siderbar

属性定义

每个属性一行, 禁止一个选择器定义成一行; 属性大括号前空格, 起始大括号和选择器名放在一行, 多个选择器一起定义时每个选择器一行.

.selector {
  height:400px;
  width:400px;
}

.site-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
}

属性顺序

以类型分组 css 属性, 以下面顺序定义 css 属性

.selector {
  /* 位置属性 */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* 显示&盒模型 */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* 颜色 */
  background: #000;
  color: #fff
  
  /* 字体 */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* 其他 */
  cursor: pointer;
}