BEM（一种 CSS 命名规则）

一、 什么是 BEM

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由 Yandex 团队提出的一种前端命名方法论。

这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义。（摘录自伯乐在线，不擅总结见谅）

 

<div class="tabs category-tabs">
    <a href="#" class="tabs__item tabs__item--active">电影</a>
    <a href="#" class="tabs__item">动画</a>
    <a href="#" class="tabs__item">纪录片</a>
    <a href="#" class="tabs__item">广告</a>
</div>

如上，tabs 为 block，是一个逻辑与功能的独立组件，或者“模块/功能区块”随便你怎么叫，

tabs__item 为 element，是非区块的其他东西，（这里为什么要用双下划线(而不是单的)其实我也不知道）

（而这两者到底该如何界定，主要看你的功能复杂程度，比如 list 区块下 有个 list__item，而 list__item 如果太复杂，不妨再写个 item 区块）

tabs__item--active 为 modifier，正如其表意，用于修饰/标注。

把它想象成一个 XML 或者 json 要更容易理解些。

 

好，区块化是懂了，但为什么非要这么写呢，不是更麻烦又难看了吗，

毕竟大多时候我们还是习惯 class 属性里写很多类的，诸如 BootStrap。

　　

二、 为什么要使用 BEM

1. .head > .logo 速度肯定没有 .head-logo 快

选择器渲染是由右至左的(div.logo 这类除外，那样就更烧了)，意味着先遍历一遍 CSSOM 树找到 .logo 再找 .head。

另外，也大大地避免了污染，毕竟当到处都有 .body/.content 时，说不定刚改了一页发现另一页不对了。

2. 样式层叠问题

id > class > (:nth-* :empty :checked等伪类) > [] > div = :not()

这个选择器优先级大家都熟悉吧，曾见识过全用 id 作为选择器的改需求，由衷想说，能只用一个 class 就只用一个，样式修改会方便很多。

3. 模块化

BEM 中的 B(block) 可以被认为就是模块的意思，换个顺序，复制粘贴都是飞快的，不会牵扯太多，结构更稳定。

4. Less/Sass 等工具的应用

会产生上节最后所提到的疑问，很大原因就在于没有享受到“动态CSS”的魅力和乐趣。

写很多类是因为它公用，而预处理语言能像变量一样保存这些公共类，那我还何必加在 HTML 上呢，毕竟又多又破坏语义。

5. 为了改需求时能优雅一些

工作半年多，有时真的会被业务搞得没脾气，需求变更是常有的事，又往往出于对项目负责的态度说改就改，

于是乎，在小修改上，用层叠去覆盖，在大修改上，用 modifier 去补充修饰，都可以避免越改越乱的情况。

 

三、BEM 具体要做什么

1. 学会使用 Less/Sass

个人认为这是十分首要的一环，不然你肯定会为公共类问题而叫苦不迭的，

其次 .tabs {*_item {}} 这种嵌套式的编写方式也会让代码非常清晰和简单。

此外题外话：推荐一款名为 Koala 的编译工具，不必用 node.js 或者 blabla 那些来把 Less/Sass 编译成 CSS 了。

2. 学会使用 Emmet

这是一款快速编码的神器，具体可查看教程，主要是能让书写 HTML 变得行云流水。

3. 多文件分解

将所有模块的 CSS 分别放在不同的 *.css 文件里，小巧意味着可替换，易查找，牵动不大。

使用 @import 方法链接起来，Less 编译时会帮你压缩到一起的。

4. 将皮肤分离出去

像 reset | public | module | respond | theme 这样，将背景色/文字颜色等，分离到 theme 里去。

5. 语义问题，有意义的命名

把关键词和功能写在 class 里是个很棒的事，所以它最好是有意义的名字。

如今如果选用 BEM 命名规则，个人认为它会更清晰，毕竟 element 有没有意义无所谓嘛，block 有意义才是正道。

6. 最后聊聊简单与复杂

扪心自问，BEM 到底让命名更复杂了还是更棒了？

说实话，我觉得实在不能更棒。

就和 Vue.js 为什么更好一样，这个问题可见知乎

 

四、其他

1. 用 HSL 要比 RGB 好一些，因为如果用 HSL，设计会对你说，这个颜色浓一点或淡一点，而不是这颜色好像偏红了偏蓝了。

2. 空格用双格，别用4个空格也不用tab，有内嵌关系就缩进...这样明确关系，方便查找。

3. 舍弃 IE 吧，虽然它还占有 18% 左右的 PC 端市场份额(移动端毫无它的一席之地吧)，但真心觉得不值得。

4. 善用 Less 的 data-uri 方法，将小图在编译时自动转成 base64，不去占用 http 请求。