1 命名规范

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

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

1.1 命名思想

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

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

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

相关链接:

  • BEM—源自Yandex的CSS 命名方法论
  • BEM官网

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 区块命名

【推荐】 一般区块都可以划分为头部、身体和尾部,因此建议给你的区块分别以 hdbdft来划分;

示例:

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

附:命名示例

命名示例

[⬆]