CSS 命名管理 之 BEM

好吧，将 BEM 简单的解释为 “Block-Element-Modifier“， 其实是个不负责任的做法。鬼知道 Block 是什么啊？所以，看了一些似懂非懂的中文解释之后，自己还是得去找些英文来读一读，顺便总结一下。

本人对 HTML、JavaScript、CSS 其实都只是一知半解，所以，如果有理解不到位的，还望各位看官斧正。但是，本着“要学就要学最先进”的原则，即使是基础不扎实，还是要冲着更有效率的方式前进。

有不想看我罗嗦的看官，可以直接看下面这篇文档：

https://css-tricks.com/bem-101/

 

什么是 BEM

我们借助一个实例，来对 BEM 做一下介绍。下面是一个遵照 BEM 规则写的 CSS：

/* Block */
.btn {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.btn__price {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: .4;
  border-radius: 5px 0 0 5px;
}

/* Element */
.btn__text {
  padding: 0 10px;
  border-radius: 0 5px 5px 0;
}

/* Modifier */
.btn--big {
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.btn--blue {
  border-color: #0074D9;
  color: white;
  background-color: #0074D9;
}

/* Modifier */
.btn--orange {
  border-color: #FF4136;
  color: white;
  background-color: #FF4136;
}

/* Modifier */
.btn--green {
  border-color: #3D9970;
  color: white;
  background-color: #3D9970;
}


body {
  font-family: "fira-sans-2", sans-serif;
  background-color: #ccc;
}

View Code

然后，我们把它应用到这个页面上：

<a href="http://git.oschina.net/" class="btn">
  <span class="btn__text">Standard button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--orange btn--big">
  <span class="btn__price">$3</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--blue btn--big">
  <span class="btn__price">$4</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--green btn--big">
  <span class="btn__price">$9</span>
  <span class="btn__text">Big button</span>
</a>

于是，我们得到了这样的结果：

很显然，这里的 block 只是被命名为 btn，而不是 HTML 里的那个 button 对象； block 只是我们的一个处理单元，对它的定义貌似没有特殊要求，甚至它是可以包含其他 block 的。那么，另一个概念“ Element ”也就呼之欲出了，组成 Block 的，当然就是它的元素。显然，Element 是针对，也是依赖于 Block 存在的。而 modifier 则是简单的对 block 某些属性的重写。

重中之重！从 CSS 代码里面，我们就可以看到，element 和 modifier 是从属于 block的！从哪里可以看出来？命名！好吧，只是开个玩笑。在这里，element 被命名为 block__ele的形式(btn__txt, btn__price), modifier 则被命名为 block--mod的形式（btn--orange）；你可以把连接符换成你喜欢的符号，但是“--”，“__”是大家都推荐的。对于同一个 block 的不同定制需求，我们只需要添加新的 modifier 就好，是不是很方便？

 

为什么需要 BEM

当然，写个小网页没关系，反正就那么几个控件，你随便怎么命名都无所谓。但是，页面大了，参与的人员多了，命名的识别度、以及一致性就成了大问题；另一种情况，假设每个人都有一套独立的命名规则，这样是可以在很大程度上避免命名污染的，但也走向了另一个极端 —— CSS 文件变得很庞大。所以，就出现了这样一类技术，which aimed on reducing CSS codebase and organizing programmers cooperation and maintaining of CSS code。比如，OOCSS，SMACSS，SUITCSS，Atomic CSS等。

那么，BEM 相比之下的优势在哪里呢？正如我们知道的那样，使用命名管理和不使用命名管理，肯定是有本质上的区别的，就像是开汽车和走路一样；同时，汽车有电动的、汽油的、柴油的等等，还有越野的和普通代步的，适用性和效率差别也是很大的。所以，如果你已经在使用命名管理，那就已经是很有效率了。至于 BEM 的优势，大家众说纷纭，就我看到的，简单概括。首先是命名识别度高，结构清晰。element 和 modifier 与 block 之间的从属关系，可以从名称上就一目了然的区分。其次，命名隔离性好。每一个 Block 都有一个独立的空间，很好的控制了对其他元素的污染。再次，良好的扩展性。如果新的 block 只是和原来的 block 有不同的背景颜色，那么，只需要再创建一个新的 modifier。最后，它可以很好的和 Javascript （DOM）很好的整合，在针对某个 block 的操作里，所有元素的名称都是一致的。

 

伪 BEM

据说这是应用 BEM 常犯的一个错误。这样的 CSS :

.nav .nav__listItem .btn--orange {
  background-color: green;
}

这样的 html：

<a class="btn" href="http://css-tricks.com">
  <div class="nav__listItem">Item one</div>
  <div class="nav__listItem">Item two</div>
</a>

虽然看着像是 BEM， 但是，是不是有种神经错乱的感觉？虽然页面看起来是一样的，但是。。。我想说，如果是这样，你还是按自己想法写个名字给我猜好了，说不定我还能猜到你写的啥。所以，然后，又有人给出了这样的建议：

• Never overriding modifiers in an unrelated block.
• Avoiding making unnecessary parent elements when the child can exist quite happily by itself.

翻译为人话就是：结构清晰，严格执行 element 和 modifier 与 block 的从属关系； block 嵌套的层次要尽量少（他能搞得定，就不要给他再搞个爹）。

 

好吧，另外一篇讲 BEM 的：

http://www.w3cplus.com/css/bem-definitions.html

这篇也不错：

http://getbem.com/introduction/

http://nicolasgallagher.com/about-html-semantics-front-end-architecture/