Skip to content

概念

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

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

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

TIP

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

常用规范

  • blockelementmodifier包含多个单词时,用一个中划线-链接,例如el-dropdown-menuel-button
  • blockelement用双下划线__链接,例如form__itemmenu__item
  • elementmodifier用双中划线--链接,一般用来表示元素的不同状态,例如el-button--defaultel-button--success
  • 用 JS 控制样式时,CSS 命名用is-开头,例如is-successis-failedis-disabled

MIT License