BEM 命名规范

1. 关于 BEM

不一样的团队在写 CSS 选择器（CSS Selectors）有不一样的方法。有些团队使用的是连字符分隔（hyphen delimiters）法，还有一些倾向于使用一种叫 BEM 的命名法，这种方法更加有条理。

总的来说，这些 CSS 命名规范试图解决 3 类问题：

1. 仅从名字就能知道一个 CSS 选择器具体做什么；
2. 从名字能大致清楚一个选择器可以在哪里使用；
3. 从 CSS 类的名称可以看出它们之间的联系。

不知你是否见过这样的类名：

.nav--secondary {
  ...
}
.nav__header {
  ...
}

这就是 BEM 命名规范。

2. B 代表元素（Blocks）

BEM 规范试图将整个用户界面分解成一个个小的可重复使用的组件。

让我们来看看下图：

这个火柴人代表了一个组件，比如说一个设计区块。

或许你已经猜到了 BEM 这里的 B 意为『区块』（‘Block’）。

在实际中，这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。

根据上述解释，那么这个组件的理想类名称即是 stick-man 。

组件的样式应写成这样：

.stick-man {
  
}

在这里我们使用了连字符分隔法，很好！

理论上来说，Block 是一个你以后可以重用的单元！

Block 的取名（名字）应该描述的是你这个组件是什么，而不是描述它像什么！ block 的名字不能取描述外观的文字。

2. E 代表元素（Elements）

BEM 中的 E 代表着元素。

整体的区块设计往往并不是孤立的。

比方说，这个火柴人有一个头部（head），两只漂亮的手臂（arms）和双脚（feet）。

这些 head、 feet 和 arms 都是组件中的元素。它们可视作子组件（child components），也就是父组件的组成部分。

如果使用 BEM 命名规范的话，这些元素的类名都可以通过在『两条下划线』后加上元素名称来产生。

比如说：

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

3. M 代表修饰符（Modifiers）

M 在 BEM 命名法中代表修饰符。

如果说这个火柴人有个 blue 或者 red 这样的修饰符怎么办呢？

在现实场景里，这可能是一个 red 或者 blue 的按钮。这就是之前在讲的组件当中的限定修饰。

如果使用 BEM 的话，这些修饰符的类名都可以通过在『两条连字符』后加上元素名来产生。

比如说：

.stick-man--blue {
}
.stick-man--red {
}

最后这个例子展示的是父组件加修饰符。不过这种情况并不经常出现。

假如我们这个火柴人拥有另一个不一样的头部大小呢？

这一次元素被加上了修饰符。记住，元素指一个整体封装区块中的一个子组件。

.stick-man 表示区块（Block）， .stick-man__head 表示元素（the element）。

从上例可以看出，双连字符也可以这样使用：

.stick-man__head--small {
}
.stick-man__head--big {
}

重申一次，上例中使用的双连字符是用来指代修饰符的。

这样你都明白了吧。

这就是 BEM 的基本用法。

个人来说，我在小项目中一般只用连字符分割法来写类名，在用户界面更复杂的项目中使用 BEM 方法。

关于 BEM，从这里了解更多。

4. 缺点和改进方案

• BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。
• 而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多。

BEM 和预编译结合：

.header {
    &__body {
        padding: 20px;
    }
    &__button {
        &--primary {
            background: #329FD9;
        }
        &--default {
            background: none;
        }
    }
}