概念

BEM命名法，是对 CSS 命名的一种规范，将页面模块化，隔离样式，提高代码的复用性，减少后期的维护成本。BEM 的意思就是Block(块)、Element(元素)、modifier(修饰符)，利用不同的块，功能以及样式来给元素命名，通过双下划线__或者双中划--链接。

BEM 通常用于框架开发中，比如微信WEUI、饿了么Element-ui、有赞Vant等

.block {
}
.block__element {
}
.block--modifier {
}

TIP

• block代表更高级别的抽象或组件
• block__element代表block的后代，用于形成一个完整的block的整体
• block--modifier代表block的不同状态或不同版本

常用规范

• block、element、modifier包含多个单词时，用一个中划线-链接,例如el-dropdown-menuel-button
• block和element用双下划线__链接，例如form__item、menu__item
• element和modifier用双中划线--链接，一般用来表示元素的不同状态，例如el-button--default、el-button--success
• 用 JS 控制样式时，CSS 命名用is-开头，例如is-success、is-failed、is-disabled