【译】前端BEM命名方法论之三：命名惯例

【译】前端BEM命名方法论之一：BEM 官方简介文档
【译】前端BEM命名方法论之二：BEM中的重要概念

使用 BEM entity（BEM 实体）开发需要了解它们的命名规范。

这个命名惯例的主要理念是使 CSS 选择器的命名 尽可能地富含信息和明确。这有助于令代码开发和调试（debugging）更加容易，同时利于解决web开发者面临的一些问题。

比如说，我们有一个命名为menuitemvisible的 CSS 选择器。快速过目这样的一个记号/标记（notation）并不能让我们从选择器的名称中识别出 BEM entity 的类型。

让我们加入一个分隔符（delimiter）：
menu-item-visible 或 menuItemVisible

被写成这样，选择器的名称就被清晰地分成带有逻辑的几个部分。我们可以假设 “menu ” 是一个 block，“item ” 是一个element，“visible”是一个 modifier。然而，现实中的例子往往更加复杂并且没那么（not as）直接了当/明确，而这也正是 BEM 命名惯例的用武之地（and that’s where the BEM naming convention comes in useful）。

BEM 方法论提供了一种用来创建命名规范的思想/理念（idea），并且在它权威的 CSS 选择器命名惯例 中实施这种理念。可是，也有大量基于 BEM 原则的替代方案（alternative schemes ）存在于 web 开发世界中。

CSS 选择器命名惯例

• BEM entity 的名称使用 数字和小写拉丁字母 书写。
• 名称中各个独立的单词之间使用连字符（hyphen）（-）隔开。
• 使用 CSS class（类）保存 block、element和modifier名称的信息。（译者注：文档的意思应该是使用 class 作为选择器）

以下是 block、element 和 modifier 的命名规范：

Block 的名称

block 的名称沿用（follow）block 命名方案（scheme）并且为 element 和 modifier 定义了一个命名空间（namespace）。
有时候 block 的名称可以使用各式各样的的前缀（prefix）。 BEM 的历史这篇文章详细介绍了我们使用前缀的经验。

示例

menu
lang-switcher

HTML

...

CSS

.menu { color: red; }

Element 的名称

由 block 的名称定义的命名空间标识了 element 属于该 block。element 的名称由双下划线（double underscore）（__）分隔。

一个 element 的全称是用下面的这个方案创建的：

block-name__elem-name

如果一个 block 拥有几个完全相同的 element，例如在菜单项（menu items）的案例中，所有的菜单项都将具有相同的名称：“menu_item”。

---

非常重要的提醒！BEM 方法论不建议在 element 中使用 element

示例

menu__item
lang-switcher__lang-icon

HTML

 ...  

CSS

.menu__item { color: red; }

Modifier 的名称

由 block 的名称定义的命名空间标识了 modifier 属于该 block 或 该block 的 element。modifier 的名称由单下划线（single underscore）（_）分隔。

一个 modifier 的全称是用下面的这个方案创建的：

• 对于 Boolean（布尔） 类型的 modifier —— owner-name_mod-name
• 对于 键值对（key-value）类型的 modifier—— owner-name_mod-name_mod-val

---

非常重要的提醒！在 BEM 方法论中，modifier 不能在其所有者的上下文范围之外使用（a modifier cannot be used outside of the context of its owner ）

Block modifier

• 布尔型的 modifier。这种 modifier 的值是没有被指定的。其全称是用 block-name_mod-name方案创建的。例如： menu_hidden。

• 键值对型的 modifier。这种 modifier 的值 与 它的名称 之间用单下划线（_）分隔。其全称是用 block-name_mod-name_mod-val 方案创建的。例如： menu_theme_morning-forest。

HTML

...
...

不正确的标记方法

...

这里的标记缺少（is missing）由该 modifier 影响的 block。

CSS

.menu_hidden { display: none }
.menu_theme_morning-forest { color: green; }

Element modifier

• 布尔型的 modifier。这种 modifier 的值是没有被指定的。其全称是用 block-name__elem-name_mod-name方案创建的。例如： menu__item_visible 。

• 键值对型的 modifier。这种 modifier 的值 与 它的名称 之间用单下划线（_）分隔。其全称是用 block-name__elem-name_mod-name_mod-val 方案创建的。例如： menu__item_type_radio 。

HTML

 ...  

CSS

.menu__item_type_radio { color: blue; }

使用命名惯例的例子

用 HTML 和 CSS 实现登录表单：

HTML

CSS

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

其他可选的命名方案

有一些其他的 基于 BEM 命名惯例的方法。