BEM的介绍与使用

发表于 | | 阅读次数

cover_pic

概念

BEM代表（Block， Element， Modifier），是由俄罗斯的互联网企业Yandex的开发团队提出的一种前端命名方法论，它可以更好地组织你项目中的CSS类名，对于大型项目成倍增长的样式，它将很有用。

BEM基于web组件的开发方式，其背后的思想在于将用户界面划分为独立的块，这使得开发人员在构建复杂UI时更加的容易和快速，直接复用已存在的组件，而不是复制和粘贴。

介绍

  • Block：代表块，用于表示组件。
  • Element：代表元素，出现在块的内部，是块构成的主要成员。
  • Modifier：代表修饰符（比如不同的状态或版本），开发人员经常会遇到这种情况：要写重复的组件或者两个结构一样的组件，但只有小部分样式的不同，例如： 两个div，一个是红色背景，一个是蓝色背景。这时修饰符起了作用，用一个类名来添加额外的样式。修饰符使用--两个破折号作为区分，适用于块和元素，我们称之为块修饰符和元素修饰符。

一般来讲类名最多只能包含一个元素，即.block__element，当出现block__element1__element2时，应该考虑重新调整下组件的结构。
Block、Element、Modifier的命名如果是多个单词，那么之间用单个-隔开，即user-profile，state-success（这也是为什么modifier使用--的原因）。

使用

接下来我们描述下BEM的使用场景，首先假设这个组件是一个“人”（.person），由四肢组成（.person__leg、.person__hand），修饰符可能是性别、年龄段等（.person--male、.person--female、.person--audlt、.person--child），这方便提供给开发者关于这些类名之间的联系，而不必从CSS上去推断。

更重要的一点是你现在可以重用你的组件，假设两个不同的页面：一个显示成人，另一个显示儿童；人都是四肢、头部、手脚的，对于这部分类名，我们保持不变。我们所要做的只是通过修饰符来调整块或元素，以此达到我们想要的效果：




图1：通过块创建出一个“人型”组件。


图2：通过元素创建出人体所需组成部分。


图3：通过修饰符对块或元素进行部分调整。

来看看BEM在项目中的应用：
以常用的按钮组件.btn为例，这是每个网站几乎都会用到的，它提供给用户最基本的交互。这种较小的组件基本上没有包含太多的元素，但可能会包含多个修饰符，比方说这个按钮拥有四种颜色：#efb5b5，#aed7ea，#afdeb5，#f8d892，通常我们这样定义：

1
2
3
4
5
6
7
8
/* Block */
.btn { /* 这里是通用的样式 */ }
/* Modifiers */
.btn--red { background: #efb5b5; }
.btn--blue { background: #aed7ea; }
.btn--green { background: #afdeb5; }
.btn--yellow { background: #f8d892; }

HTML中使用：

1
<a href="#" class="btn btn--blue">Text</a>

如你看到的，这里没有添加任何内部元素，但假如你想在内部添加一个图标，可以这样定义：

1
2
3
4
<a href="#" class="btn btn--red">
  <span class="btn__icon">&larr;</span>
  Text
</a>

总结

BEM的优点是便于维护，按组件划分类名，减少层次关系，实现扁平化、语义化，通过唯一的类名来避免不必要的样式继承，提高渲染效率。
但使用BEM并不是最终目的，而是将项目合理地组件化，将组件合理地结构化，构建易维护、易扩展的程序。
Maxim Shirshin说过：根本没有绝对正确的BEM，我们所提供的这种实现只是我们更喜欢的那种，你也可以有你自己的BEM，只要你遵循BEM的核心原则。BEM是一个方法论。公司和团队可以在把BEM整合到现有的工作流中的同时找出最适合自己的。

参考文献：
Introducing BEM: The popular CSS naming convention
相关链接：
‘Why BEM?’ in a nutshell
The Evolution Of The BEM Methodology
MindBEMding – getting your head ’round BEM syntax