使用 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 开发世界中。
-
)隔开。block
、element
和modifier
名称的信息。(译者注:文档的意思应该是使用 class 作为选择器)以下是 block
、element
和 modifier
的命名规范:
block
的名称沿用(follow)block 命名方案(scheme)并且为 element
和 modifier
定义了一个命名空间(namespace)。
有时候 block 的名称可以使用各式各样的的前缀(prefix)。 BEM 的历史这篇文章详细介绍了我们使用前缀的经验。
示例
menulang-switcher
HTML
CSS
.menu { color: red; }
由 block
的名称定义的命名空间标识了 element
属于该 block
。element
的名称由双下划线(double underscore)(__
)分隔。
一个 element
的全称是用下面的这个方案创建的:
block-name__elem-name
如果一个 block
拥有几个完全相同的 element
,例如在菜单项(menu items)的案例中,所有的菜单项都将具有相同的名称:“menu_item
”。
非常重要的提醒!BEM 方法论不建议在 element 中使用 element
示例
menu__itemlang-switcher__lang-icon
HTML
CSS
.menu__item { color: red; }
由 block
的名称定义的命名空间标识了 modifier
属于该 block
或 该block
的 element
。modifier
的名称由单下划线(single underscore)(_
)分隔。
一个 modifier
的全称是用下面的这个方案创建的:
modifier
—— owner-name_mod-name
modifier
—— owner-name_mod-name_mod-val
非常重要的提醒!在 BEM 方法论中,
modifier
不能在其所有者的上下文范围之外使用(a modifier cannot be used outside of the context of its owner )
布尔型的 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; }
布尔型的 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 {}
联系客服