【CSS系列】命名千万条，BEM第一条

前言

  没有过重视“命名”这个彷佛不在技术范畴以内的东西，随着项目更新迭代变得庞大，维护起来欲哭无泪。尤为是在CSS中，一个高效的命名规范到底有多重要？

• 代码结构更加清晰有意义
• 维护变得简单
• 同事看代码的时候不骂街了

  以前看到过一种丑丑的命名（"__"和"--"）不觉得然，这正是本文探讨的主题——BEM命名规范。

1. BEM简介

  BEM(Block Element Modifier)是由Yandex(俄罗斯的网络服务门户之一)团队提出的一种前端命名规范，这里讲的BEM风格是通过改良的（没有具体阅读过相关文章，不探讨有关如何改良的细节）：

• Block：块
• Element：元素——块的组成部分
• Modifier：修饰符——表示一种形态/状态

.block {}
.block__element {}
.block--modifier
复制代码

  举一个很好理解的例子：

人            #Block
人__手          #Element
人__手--小手      #Modifier
人__手--大手      #Modifier
人__脚          #Element

人--男人        #Modifier
人--男人__手      #Element
人--男人__脚      #Element

人--女人        #Modifier
人--女人__手      #Element
人--女人__脚      #Element
复制代码

2. BEM命名 vs 传统命名

  好与很差，代码为证：

2.1 BEM命名

<!-- app.vue -->
<aside class="aside">
  <!-- 显示/隐藏侧边栏 -->
  <img :class="['aside__toggle--show', {'aside__toggle--hide': isHide}]" />
  <ul class="aside__menu">
    <li class="aside__menu__item">首页</li>
  </ul>
</aside>
复制代码

/*css*/
.aside {}
.aside__toggle--show {}
.aside__toggle--hide {}
.aside__menu {}
.aside__menu__item {}
复制代码

/*scss或less*/
.aside {
  &__toggle {
    &--show {}
    &--hide {}
  }

  &__menu {
    &__item {}
  }
}
复制代码

2.2 传统命名

<!-- app.vue -->
<aside class="aside">
  <!-- 显示/隐藏侧边栏 -->
  <img :class="['toggle', {'hide': isHide}]" />
  <ul class="menu">
    <li class="item">首页</li>
  </ul>
</aside>
复制代码

.aside {}
.toggle {}
.menu {}
.item {}
复制代码

  固然也有一些针对传统命名的优化，尽管看起来清晰不少，但意图的表达仍然有些不明确

<!-- app.vue -->
<aside class="aside">
  <!-- 显示/隐藏侧边栏 -->
  <img :class="['aside-toggle-show', {'aside-toggle-hide': isHide}]" />
  <ul class="aside-menu">
    <li class="aside-menu-item">首页</li>
  </ul>
</aside>
复制代码

/*css*/
.aside {}
.aside-toggle-show {}
.aside-toggle-hide {}
.aside-menu {}
.aside-menu-item {}
复制代码

/*scss或less*/
.aside {
  &-toggle {
    &-show {}
    &-hide {}
  }
  &-menu {
    &-item {}
  }
}
复制代码

  经过对比能够看到，BEM命名使得代码结构清晰多了，而且能把代码的意图表达得很明确。

3. 正确地使用BEM

  举一个例子，你的手里拿着一本书，但你不能说这本书是人的一部分。这就比如在代码中，有一个元素恰好某个块中，但它自己并不属于这个块，按照BEM原则，此元素的命名不应包含进去：

<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__menu__item">首页</li>
  </ul>
  <!-- 显示用户名 -->
  <span class="username">XXX 你好！</span>
</nav>
复制代码

后记

  对于BEM命名规范本人还在实践当中，也还存在一些疑问，例如在块嵌套比较深时是否形成html代码冗长？待实践一段时间有了新的想法再分享出来，你们有更好的命名方案欢迎在下方评论中分享。

  感谢你的阅读！