【译】前端BEM命名方法论之三:命名惯例

【译】前端BEM命名方法论之一:BEM 官方简介文档
【译】前端BEM命名方法论之二:BEM中的重要概念

使用 BEM entity(BEM 实体)开发需要了解它们的命名规范。

这个命名惯例的主要理念是使 CSS 选择器的命名 尽可能地富含信息和明确。这有助于令代码开发和调试(debugging)更加容易,同时利于解决web开发者面临的一些问题。

比如说,我们有一个命名为menuitemvisible的 CSS 选择器。快速过目这样的一个记号/标记(notation)并不能让我们从选择器的名称中识别出 BEM entity 的类型。

让我们加入一个分隔符(delimiter):
menu-item-visiblemenuItemVisible

被写成这样,选择器的名称就被清晰地分成带有逻辑的几个部分。我们可以假设 “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(类)保存 blockelementmodifier名称的信息。(译者注:文档的意思应该是使用 class 作为选择器)

以下是 blockelementmodifier 的命名规范:

Block 的名称

block 的名称沿用(follow)block 命名方案(scheme)并且elementmodifier 定义了一个命名空间(namespace)
有时候 block 的名称可以使用各式各样的的前缀(prefix)。 BEM 的历史这篇文章详细介绍了我们使用前缀的经验。

示例

menu
lang-switcher

HTML

<div class="menu">...</div>

CSS

.menu { color: red; }

Element 的名称

block 的名称定义的命名空间标识了 element 属于该 blockelement 的名称由双下划线(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 或 该blockelementmodifier 的名称由单下划线(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 命名惯例的方法。

    原文作者:咚门
    原文地址: https://www.jianshu.com/p/04e220366078
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞