BEM 的命名约定

上一篇文章讲解了 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

CSS

元素的名称

块名称定义的命名空间标识了一个元素属于这个块。元素的名称使用双下划线(__)与块的名称分开。

一个完整的元素名称的创建使用以下规范：block-name__elem-name

如果一个块有许多完全相同的元素，比如说菜单下面的菜单项，他们都拥有相同的名称menu__item。

例如：menu与lang-switcher

HTML

CSS

修饰符的名称

块名称的命名空间标识了一个修饰符属于这个块或者这个元素。修饰符的名称使用单下划线(_)隔开。

完整的修饰符名称的创建使用以下规范：

• 布尔类型的修饰符——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

CSS

元素修改符

• 布尔类型的修饰符。这样一个修饰符没有指定的值。完整名称使用以下格式：block-name_ele-name_mod-name，例如：menu_itme_hidden
• 键值对类型的修饰符。修饰符的名称与值使用下划线分隔（_）。完整名称使用以下格式：block-name_ele-name_mod-name_mod-valu，例如：menu_item_type_radio

HTML

CSS

使用命名约定的例子

用 HTML 与 CSS 实现的一个授权登录控件：

HTML

CSS