Why use it

近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来完成复杂的逻辑。由于这个发展趋势,Web应用的前端代码的复杂度大大提高,尤其是 JavaScript 和 CSS 代码的数量大幅增加,面对空前庞大的css和js代码量,形成科学的代码组织方法和命名规范迫在眉睫。

好的命名规则应该满足以下几个优点:

  1. 安全的命名,不会干扰其它css
  2. 我需要很快知道一个 class 位于这个伟大工程的什么位置
  3. class 尽可能少,且结构清晰
  4. 嵌套不可以太深,否则会形成难以维护的“谜”之样式

BEM

BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。这三个不同的组成部分称为 BEM 实体。

Block——块

块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置,也可以互相嵌套。

Element——元素

元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

Modifier——修饰符

修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。

// 简单地说
.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }

举个栗子

如何使用呢BEM命名方法呢?请先看以下例子:

//我们要为这个菜单写样式
<ul class="">
<li class="">Menu Item 1</li>
<li class="">Menu Item 2</li>
<li class="">Menu Item 3</li>
</ul>

1.“祖传”命名

放在以前,我们或许会这么写:

<ul class="nav">
<li class="item selected">Menu Item 1</li>
<li class="item">Menu Item 2</li>
<li class="item">Menu Item 3</li>
</ul>

看了一下,还是多清爽的。但是各位朋友是否注意到了一个问题:子元素item和其父元素menu,从命名上看,关系似乎太不紧密。一个box也可以有item子类,一个xxx也可以包含一个item子类。看看其样式的写法:

//sass
.nav {
list-style: none;
.item {
font-weight: bold;
&.selected {
color: red;
}
}
} //编译后产生的css
.nav {
list-style: none;
}
.nav .item {
font-weight: bold;
}
.nav .item.selected {
color: red;
}

从样式文件上看,仿佛也没有太大问题,但是,这是在我们代码层数较少的情况。如果是一个复杂的页面元素,我们sass层级会非常深。编译后的css,层级也会很深。

2.BEM命名

现在我们使用BEM再来编写看看:


<ul class="nav">
<li class="nav__item nav__item--selected">Menu Item 1</li>
<li class="nav__item">Menu Item 2</li>
<li class="nav__item">Menu Item 3</li>
</ul>
//sass
.nav {
list-style: none; &__item {
font-weight: bold; &--selected {
color: red;
}
}
} //使用sass编译后的css是
.nav {//菜单
list-style: none;
}
.nav__item {//菜单item
font-weight: bold;
}
.nav__item--selected { //被选中的菜单item
color: red;
}

乍看之下,根据 BEM 命名规则产生的 CSS 类名都会很复杂,但实际上在熟悉了命名规则之后,可以很容易理解其含义。其次,css不再存在复杂的层级关系,浏览器渲染的时候,样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出,减少层级就能提升性能,对应静态css文件大小也会减少。

很多人会吐槽两个下划线和两个横杠作为连接符,并不优雅。但是我觉得,BEM是一种思想,是我们需要理解的,至于我们用什么样的连接符,什么样的方式实现,可以根据自己项目的情况考虑。

05-26 15:25