CSS规范

• 选择器命名规范

  命名简短，且具有语义性，能传达结构和功能信息

  推荐多类模式，如btn、btn-primary、btn-waring

  借鉴BEM命名结构（如Block-Element）、面向对象的CSS（如容器和内容的分离思想）、原子化的CSS（比如下点介绍的命名就体现了原子化）

  <!-- 容器和内容分离 -->
  <div class="container">
    <h2>xxx</h2>
  </div>
  <style>
    .container h2 {}
  </style>
  <!-- 调整为 -->
  <div class="container">
    <h2 class="title">xxx</h2>
  </div>
  <style>
    .title {}
  </style>

  使用小写字母、数字、短横杆-命名

  w100
  h100
  mt20
  mb20
  ml20
  mr20
  pt20
  pb20
  pl20
  pr20
  tl
  tr
  tc
  fl
  fr
  bg-xxx
  c-xxx
  fs-xx
  btn-xxx

• 规则集格式规范

  当规则或声明块中有多个声明时，每个声明独占一行

  使用组合选择器时，每个选择器独占一行

  在规则或声明块的左大括号{前加一个空格

  在属性的冒号:后面加上一个空格，前面不加空格

  当一个属性有多个属性值时，以逗号,分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行

  在每个声明后面都以分号;结尾

  规则或声明块的右大括号}独占一行

  每个规则声明间用空行分隔

  最外层的引号使用单引号'

• 属性书写顺序：布局 > 盒模型 > 文本 > 字体 > 视觉动效(背景、边框、阴影、转换、动画、过渡等)

• 其他

  属性使用简写属性

  值简写：如color: #ffcc00;可写为color: #fc0;，opacity: 0.5;可写为opacity: .5;，border-width: 0px;可写为border-width: 0;

  能用类选择器就绝不用ID选择器，避免使用标签选择器

  减少后代选择器层级

  嵌套层级不超过3层

  添加必要的注释，作说明、划分

  选择器、属性名，属性值使用小写字母

  布局上尽可能地保持正常流

  遵循单一功能原则：通用样式按单一功能划分

  注意样式的作用范围