2019-09-14

Web前端

什么是BEM

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/09/14/%E4%BB%80%E4%B9%88%E6%98%AFBEM/

摘要

本文主要讲述了：

什么是 BEM
块
元素
修饰符

正文

什么是 BEM

BEM 的全称为”Block, Element, Modifier”（块，元素，修饰符）。

BEM 是一种用于指导 Web 开发的基于组件的方法论。

BEM 把用户界面划分为块和元素，用修饰符来表示块或元素的状态。

块

功能独立的可复用的组件

BEM 要求：

使用 class 选择器来表示块的名称，禁止使用类型选择器和 id 选择器
块的名称描述的是‘它是什么’（例如：列表、菜单、按钮等），而不是它的状态（红的，大的等）
块不应该影响它所在的环境，不应该给块设置外部布局的样式（例如：margin或position）

示例：

1
2
3

<header class="header"></header>
<div class="logo"></div>
<form class="search-form"></form>

嵌套

块可以互相嵌套且嵌套层级不受限制。

示例：

<header class="header">
  <div class="logo"></div>
  <form class="search-form"></form>
</header>

元素

块内不可分割的一部分

BEM 要求：

元素是可选的，并不是所有块都必须有元素
元素的全名为block-name__element-name，使用__分隔块的名称和元素的名称
元素的名称描述的是‘它是块中的什么’（例如：文本、项等），而不是它的状态（红的，大的等）
禁止把元素从块里分离出去

示例：

1
2
3

<div class="list">
  <div class="list__item"></div>
</div>

元素嵌套

元素可以互相嵌套且嵌套层级不受限制。

示例：

<form class="search-form">
  <div class="search-form__content">
    <input class="search-form__input" />
    <button class="search-form__button">Search</button>
  </div>
</form>

注意：元素永远是块的一部分，而不是另一个元素的一部分。这意味着开发者不能定义类似block__element1__element2的元素。

示例：

<!-- 错误示例 -->
<form class="block">
  <div class="block__element1">
    <div class="block__element1__element2"></div>
  </div>
</form>

修饰符

修饰块和元素

BEM 要求：

修饰符的名称描述的是外表（尺寸、主题等）和状态（禁用、获得焦点等）
修饰符的全名为block-name_modifier-name或block-name__element-name_modifier-name，使用_分隔块或元素的名称与修饰符的名称
禁止单独使用修饰符

示例：

<form class="search-form search-form_focused">
  <input class="search-form__input" />
  <button class="search-form__button search-form__button_disabled">
    Search
  </button>
</form>

示例：禁止单独使用修饰符

<!-- 错误示例 -->
<form class="search-form_focused"></form>

<!-- 正确示例 -->
<form class="search-form search-form_focused"></form>

修饰符类型

修饰符分为两种类型：

布尔型

当修饰符被使用时，其值默认为true，如果想要设置为false，就去掉修饰符。

示例：

1	<form class="search-form search-form_focused"></form>

键值对

键和值之间使用_连接。

示例：

1	<form class="search-form search-form_theme_islands"></form>

混合

BEM 允许在单个 DOM 节点上使用多个不同的 BEM 实体

示例：

<div class="header">
  <div class="search-form header__search-form"></div>
  <div class="header__search-form search-form"></div>
</div>

在这个示例中，search-form是一个块，但它同时也是header__search-form元素。

search-form块对外独立，所以不能把外部布局的样式（例如：margin或position）设置在search-form块上。但header__search-form是header块的元素，因此可以把内部布局的样式设置在header__search-form元素上。

文件结构

BEM 也适用于项目的文件结构。即把块、元素、修饰符的实现拆分成独立的文件。

BEM 要求：

单个块对应单个目录且目录的名称和块的名称相同。例如：search-form
块的实现拆分成独立的文件。例如：search-form.css、search-form.js
元素目录作为块目录的子目录且元素目录的名称以__开头。例如：search-form/__input
元素的实现拆分成独立的文件。例如：search-form__input.css、search-form__input.js
块的修饰符目录作为块目录的子目录且修饰符目录的名称以_开头。例如：search-form/_focused、search-form/_theme
块的修饰符的实现拆分成独立的文件。例如：search-form_focused.css、search-form_focused.js、search-form_theme_islands.css、search-form_theme_islands.js
元素的修饰符目录作为元素目录的子目录且修饰符目录的名称以_开头。例如：search-form/__input/_focused、search-form/__input/_theme
元素的修饰符的实现拆分成独立的文件。例如：search-form__input_focused.css、search-form__input_focused.js、search-form__input_theme_islands.css、search-form__input_theme_islands.js