# CSS BEM 命名规范

BEM 规范是Yandex团队提出的前端命名规范，是Block、Element、Modifier的缩写

BEM 规范通过连接符拼接字段，形成具有语义化的命名

# 1.使用 BEM

• -中划线：单纯的连字符，连接单词构成名称整体；

<div class="foo-bar"></div>

• __双下划线：表示块的子元素；

<div class="foo">
  <div class="foo__bar"></div>
</div>

• --双中划线：连接在代表元素命名的字段之后，代表该元素的不同状态

<div class="foo">
  <div class="foo__bar foo__bar--active"></div>
  <div class="foo__bar"></div>
  <div class="foo__bar"></div>
</div>

# 2.在预处理器中使用 BEM

在原生CSS中，这种命名方式的写法是十分不友好的，特别是嵌套元素层级变多，命名也会变得冗长，也大大降低了可读性，这也是BEM规范的缺点。
但是，结合预处理器的语法，可以让我们使用BEM规范变得更加灵活，下文以SCSS预处理器为例：

<div class="foo">
  <div class="foo__item foo__item--active"></div>
  <div class="foo__item"></div>
  <div class="foo__item"></div>
</div>

.foo {
  display: flex;
  &__item {
    background: #fff;
    &--active {
      background: #114514;
    }
  }
}