使用 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 命名惯例的方法。