使用 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
<div class="menu">...</div>
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
<div class="menu"> ... <span class="menu__item"></span> </div>
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
<div class="menu menu_hidden">...</div>
<div class="menu menu_theme_morning-forest">...</div>
不正确的标记方法
<div class="menu_hidden">...</div>
这里的标记缺少（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
<div class="menu"> ... <span class="menu__item menu__item_visible menu__item_type_radio"></span> </div>
CSS
.menu__item_type_radio { color: blue; }
使用命名惯例的例子
用 HTML 和 CSS 实现登录表单：
HTML
<form class="form form_login form_theme_forest">
<input class="form__input">
<input class="form__submit form__submit_disabled">
</form>
CSS
.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}
其他可选的命名方案
有一些其他的 基于 BEM 命名惯例的方法。
网友评论