规范

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

CSS命名规范

  1. 采用BEM命名规范,使用'-'进行连接,如命名空间(bx)-block-element--modifier,
    有以下几种情况:
    • bx-block
    • bx-block--modifier
    • bx-block-element
    • bx-block-element--modifier
  2. 当样式库中已有样式不满足业务需求时,该如何扩展或覆盖样式
    修改方式如下(为了方便区分,自定义的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. 文档注释
      /**
* 顶部注释
*/
/* 内容注释 */
    2. 修饰选择器
      /*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的取值规范
定义z-index取值范围为0-9,9则表示最顶层
一般情况下,设置position后z-index默认值为0,页面布局过程中采用(z-index+1)的模式来设置z-index值。
在该样式库中,类似于toast、dialog等modal框,根据其交互行为,一般z-index需设置为最高层级9,而其遮罩层则设为层级8

results matching ""

    No results matching ""