## 规范
此规范的目标:代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。
<br />此规范是在开发中积累下来的经验和参考其它规范/指南制定的，它只是起指导作用，除个别条目强制之外，大多数为非强制约束，开发者可根据自己的实际情况自行决定是否要遵守 该指南只是保证大方向一致性和最佳实践的阶段性总结，不是最后结论，它会随着时间而变化。

### CSS命名规范
1. 采用BEM命名规范,使用'-'进行连接,如`命名空间(bx)-block-element--modifier`,
  <br />有以下几种情况:
  * `bx-block`
  * `bx-block--modifier`
  * `bx-block-element`
  * `bx-block-element--modifier`
2. 当样式库中已有样式不满足业务需求时,该如何扩展或覆盖样式
  <br />修改方式如下(为了方便区分,自定义的namespace不能与bx相同):
  * namespace(自定义,如u)-block--modifier
  * namespace(自定义,如u)-element
  * namespace(自定义,如u)-element--modifier

### CSS行为规范
* 书写顺序(自外向内)
  1. Positon 位置信息
  position、top、right、bottom、left、z-index、display、float、overflow等
  2. Box Model 盒模型信息
  width、height、margin、padding、outline、border等
  3. Typographic 文本相关
  font、text-align、line-height、letter-spacing等
  4. Visual 视觉效果
  color、background、transform、transition等
* 巧用注释
  1. 文档注释
  ```css
  /**
   * 顶部注释
   */
   /* 内容注释 */
   ```
  2. 修饰选择器
  ```css
  /*ol*/.breadcrumb{}
  /*p*/.intro{}
  /*ul*/.image-thumbs{}
  ```
* 避免使用ID选择器
* 尽量减少选择器的嵌套
* 尽量避免依赖html标签
* 省略 0 时的单位,包括0px、0em、0rem、0%
* 十六进制值全部大写,因为Sketch色值均为大写,尽量使用简写形式的十六进制值
* 省略小于 1 的小数前面的 0
* 不要把 CSS 样式用作 JavaScript 钩子
* 避免使用!important覆盖样式,可利用选择器权值覆盖样式
* 省略外链资源 URL 协议部分,防止mixed content,但必须确定该URL支持https访问
* 无需添加浏览器厂商前缀,交给autoprefixer来自动处理

### CSS层级规范
这里讨论的层级规范等价于z-index的取值规范
<br />定义z-index取值范围为0-9,9则表示最顶层
<br />一般情况下,设置position后z-index默认值为0,页面布局过程中采用(z-index+1)的模式来设置z-index值。
<br />在该样式库中,类似于toast、dialog等modal框,根据其交互行为,一般z-index需设置为最高层级9,而其遮罩层则设为层级8