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来划分；

示例：

.ui-card__hd {
    margin: 0;
}
.ui-card__bd {
    margin: 0;
}
.ui-card__ft {
    margin: 0;
}

附：命名示例

命名示例

[⬆]