CSS BEM 命名规范简介(推荐)

CSS BEM 命名规范简介(推荐)

什么是 BEM

BEM 是 Block（块）、Element（元素）、Modifier（修饰符）的缩写，是一种前端 CSS 命名规范。

在 BEM 的规范下，每个页面元素都是通过一个 Block （块）来表示的，Block 可以包含多个 Element （元素），而 Element 又可以被修饰符 Modifier （修饰符）所修饰。

BEM 的优点

1. BEM 可以让代码更加明确。在采用 BEM 时，每个元素的作用都变得清晰。这样可以减少对样式选择器的解释和理解。
2. BEM 可以避免类名冲突。BEM 的标识符中存在模块名称、元素名称以及修饰符名称，因此可以有效的防止类名冲突的问题。
3. BEM 可以便于维护和扩展。使用 BEM 可以轻松地更新或增加元素，而不必考虑十分细致的样式选择器命名方法。

如何实现 BEM

Block

Block 是页面中的一个独立的部分，在 HTML 中一个 Block 可以是一篇文章、一个导航栏或一个搜索框。在 CSS 中 Block 通常被表示为一个类名。例如，下面这里表示一个提示框：

<div class="alert"></div>

.alert {}

Element

Element 表示 Block 的组成部分。大多数的元素都是 Block 的 Element。但是，它们不是独立的 Block ，因而没有单独的 CSS 类名。例如，.alert 内的标题 h1 是 alert 的 Element：

<div class="alert">
  <h1 class="alert__title"></h1>
</div>

.alert__title {}

Modifier

Modifier 是用于更改 Block 或 Element 外观的标志。例如，修改警告条颜色的样式：

<div class="alert alert--green">
  <h1 class="alert__title">提示标题</h1>
</div>

.alert--green {
  background-color: green;
}

可以看出，Modifier 的标识符在原有的 Block 或 Element 标识符基础上，增加了两个短横线。

示例1

<div class="search">
  <input class="search__input" type="text" placeholder="请输入搜索关键词" />
  <button class="search__button">搜索</button>
</div>

.search {}

.search__input {}

.search__button {}

我们可以看到 search 充当的 Block 的角色。里面包含两个元素（input 和 button）。它们的圆点元素分别为 search__input 和 search__button

示例2

<ul class="sidebar">
  <li class="sidebar__item">
    <a class="sidebar__item__title" href="">产品分类</a>
    <ul class="sidebar__item__list">
      <li class="sidebar__item__list__subitem">
        <a href="">手机</a>
      </li>
      <li class="sidebar__item__list__subitem">
        <a href="">笔记本电脑</a>
      </li>
    </ul>
  </li>
</ul>

.sidebar {}

.sidebar__item {}

.sidebar__item__title {}

.sidebar__item__list {}

.sidebar__item__list__subitem {}

我们可以看到sidebar 充当的 Block 的角色，里面包含一个元素（sidebar__item）。它又包含我们在网站中常见的“分类导航栏”- 商品分类（sidebar__item__title）和二级分类子项列表(sidebar__item__list)，二级分类中的内容为字典列表项（sidebar__item__list__subitem）。