代码规范之 - BEM

什么是 BEM

BEM 是 Block（块） Element（元素） Modifier（修饰器） 的简称，是由 Yandex 团队提出的一种前端命名规范。 其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。

个人理解就是这个写法可以让我很快速的去更改某一个元素的样式，又不会影响全局

为什么要使用代码规范

我们经常在制作网页时，通常会遇到如下的 CSS 样式

.main .form .wrapper {
  margin: 0 auto; /*写入你需要的css*/
}
.main .form .text {
  margin: 0 auto; /*写入你需要的css*/
}
.page .warpper .layout .main {
  margin: 0 auto; /*写入你需要的css*/
}

这样的书写方式是我们最常见的写法，他虽然解决了单纯全局互相影响的问题，但是另外一方面也延伸出了一些问题：

• 维护 css 的时候，css 的作用域会对后来维护人员造成很大的困扰
• 如果出现某个共同属性，css 的优先级是个头疼问题。
• css 编写的时候复用性不高，当存在多个样式一致的时候，我们可能会选择减少命名空间的方式来提升当前 css 的作用范围，但是可能会导致 css 样式冲突的问题。
• (欢迎大家补充)

---

想了想怎么让人更加通俗的理解意思，我们把项目比喻成 房子，嗯，就是这样~

---

Block（块）

一个块是一个独立的实体，既可以是简单的也可以是复合的（包含其他块）。如果项目是一个房子，我们可以理解为块就是房子里的一个 房间

例如我想描述的是 房子 里的 房间 ，我可以命名为
.room

Element（元素）

一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。

例如我想描述的是 房间 里的 床，我可以命名为
.room-bed

Modifier（修饰器）

Modifier 定义 block 和 element 的外观,状态,或者行为。

例如我想描述的是 房间 里的 床 的颜色为 红色，我可以命名为
.room-bed--red

---

是不是这样会简单理解一点

---

在 LESS、SCSS 使用 BEM

.main {
  &-block {
    &__title {
      &--fullsize {
        font-size: 100%;
      }
    }
  }
}

可以得出 .main-block__title--fullsize: 100%。
日常项目中，个人使用的是 .block-element__element-element--modifier,当然，仅供参考。

注意事项

• 个人推荐 Element 的添加最多不要超过 3 个，既 .block-element__element-element 差不多了，当然，看你自己。
• Class 的数量尽可能少，防止 css 出现优先级竞争
• 一个 Block 推荐单独抽出来书写，方便重复利用。
• 为了方便自己及他人，推荐使用 英文直译 作为元素的命名。

总结

• 在实际项目中，个人认为一个好的代码规范可以使团队的工作变得更加效率，也方便拿作品展示给他人。
• BEM 使代码的能够有更好的可用性、可延伸性。
• 加油，你是最胖(棒)的。