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层
• 添加必要的注释，作说明、划分
• 选择器、属性名，属性值使用小写字母
• 布局上尽可能地保持正常流
• 遵循单一功能原则：通用样式按单一功能划分
• 注意样式的作用范围