上一篇文章讲解了 BEM 的核心概念,今天这篇文章主要讲解 BEM 的命名约定。
当时工作中遇到 BEM 实体的时候,你需要了解他们的命名规则。
命名约定的主要思想是要使得 CSS 选择器尽量的清晰并且能够携带最多的信息。这将有助于代码的开发与调试,并且解决 web 开发者所面临的一些问题。
假设我们有一个叫做menuitemvisible
的选择器。这种符号的第一眼不能让我们从选择器的名称中识别出 BEM 实体的类型。
让我们加入定界符:menu-item-visible
或者mentItemVisible
以这种方式书写,选择器的名称被清晰的分割成多个逻辑部分。我们能确定menu
是一个块,item
是一个元素,然后visible
是一个修饰语。但是,实际项目中的例子通常更为复杂,并不像之前的例子那样简单易懂,这就是 BEM 命名约定发挥作用的地方。
BEM 方法论提供了一种创建命名式规则的思路,并将它落实为典型的 CSS 选择器命名规则。但是,还有其它基于 BEM 的替代方案。
CSS
选择器的命名约定
- BEM 的实体名称使用数字与小写拉丁字符
- 名称中的单词使用连字符(
-
)隔开。 - 块名称,元素与修饰符的信息存储在 CSS 类中。
块的名称
块的名称使用block-name
规范,并为元素与修饰语定义一个命名空间。
块的名称可以使用不同的前缀。我们使用前缀的经验在文章 The History of BEM 中详细讲述了。
例如:menu
与lang-switcher
HTML
1 |
<div class="menu">...</div> |
CSS
1 |
.menu { color: red; } |
元素的名称
块名称定义的命名空间标识了一个元素属于这个块。元素的名称使用双下划线(__
)与块的名称分开。
一个完整的元素名称的创建使用以下规范:block-name__elem-name
如果一个块有许多完全相同的元素,比如说菜单下面的菜单项,他们都拥有相同的名称menu__item
。
例如:menu
与lang-switcher
HTML
1 |
<div class="menu"> ... <span class="menu__item"></span> </div> |
CSS
1 |
.menu__item { color: red; } |
修饰符的名称
块名称的命名空间标识了一个修饰符属于这个块或者这个元素。修饰符的名称使用单下划线(_
)隔开。
完整的修饰符名称的创建使用以下规范:
- 布尔类型的修饰符——
owner-name_mod-name
- 键值对类型的修饰符——
owner-name_mod-name_mod-val
块级修饰符
- 布尔类型的修饰符。这样一个修饰符没有指定的值。完整名称使用以下格式:
block-name_mod-name
,例如:menu_hidden
- 键值对类型的修饰符。修饰符的名称与值使用下划线分隔(
_
)。完整名称使用以下格式:block-name_mod-name_mod-valu
,例如:menu_theme_morning-forest
HTML
1 2 |
<div class="menu menu_hidden">...</div> <div class="menu menu_theme_morning-forest">...</div> |
CSS
1 2 |
.menu_hidden { display: none } .menu_theme_morning-forest { color: green; } |
元素修改符
- 布尔类型的修饰符。这样一个修饰符没有指定的值。完整名称使用以下格式:
block-name_ele-name_mod-name
,例如:menu_itme_hidden
- 键值对类型的修饰符。修饰符的名称与值使用下划线分隔(
_
)。完整名称使用以下格式:block-name_ele-name_mod-name_mod-valu
,例如:menu_item_type_radio
HTML
1 |
<div class="menu"> ... <span class="menu__item menu__item_visible menu__item_type_radio"></span> </div> |
CSS
1 |
.menu__item_type_radio { color: blue; } |
使用命名约定的例子
用 HTML 与 CSS 实现的一个授权登录控件:
HTML
1 2 3 4 |
<form class="form form_login form_theme_forest"> <input class="form__input"> <input class="form__submit form__submit_disabled"> </form> |
CSS
1 2 3 4 5 6 |
.form {} .form_theme_forest {} .form_login {} .form__input {} .form__submit {} .form__submit_disabled {} |