1 命名规范

该命名规范主要解决以下问题：

  • 从类名可以清晰区分出其功能作用，使页面结构清晰【命名空间、标识符】；
  • 以组件、模块的思想去写一个区块的结构，强化结构的模块化【BEM模块思想、基类、子类、扩展类】；
  • 减少多人合作、项目耦合等情况下的命名冲突【命名空间】；

1.1 命名思想

【强制】 区块、模块、组件等一个整个的结构遵循BEM命名思想；

当你能确定组件内最后一级的结构不会再发生变化时，最后一级可省略类名，使用两层嵌套；

  • .block 代表了更高级别的抽象或组件；
  • .block__element 代表.block的后代，用于形成一个完整的.block的整体；
  • .is- | .has- | .ext- 代表.block的修饰符，不使用双中划线--。

相关链接：

1.2 多单词连接

【强制】 （所有的）多个单词使用小驼峰式命名，不允许使用中划线或者下划线连接多个单词；

多个单词使用小驼峰式命名，以提升名称的识别度，例如：newsList；

1.3 命名空间

【强制】 在合适的地方使用命名空间；

  • 布局：以g为命名空间，例如：.g-wrap 、.g-header、.g-content、.g-mian、.g-aside 等；
  • 工具：以u为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：.u-clearfix、.u-ellipsis 等；
  • 状态：以is为命名空间，表示动态的、具有交互性质的状态，例如：.is-open、.is-active、.is-selected 等；
  • 组件：以ui或者mod为命名空间，表示可复用、移植的组件模块，例如：.ui-slider、.mod-dropMenu等；
  • 扩展：以ext为命名空间，表示对组件基类的视觉形态的扩展，例如：.ext-cover、、.ext-alignLeft 等；

状态类或扩展类一般出现在组件的父级节点，并且不允许单独使用。举个例子，同一个页面有可能会在不同的地方都会使用is-active，并且每个is-active所操纵的节点的是不同的，所以要使用.ui-userCard.is-active 或 .ui-userCard .is-active来定义

1.4 图片命名

  • 图标：以ico作为命名空间，例如：.ico-close 等；
  • LOGO：以logo作为命名空间，例如：.logo-duowan 等；
  • 内容图像：以img作为命名空间，例如：.img-userGuide 等；

1.5 区块命名

【推荐】 一般区块都可以划分为头部、身体和尾部，因此建议给你的区块分别以 hd、bd、ft来划分；

示例：

  1. .ui-card__hd {
  2.     margin: 0;
  3. }
  5. .ui-card__bd {
  6.     margin: 0;
  7. }
  9. .ui-card__ft {
  10.     margin: 0;
  11. }

附：命名示例

命名示例

[⬆]