CSS 命名太乱？BEM 规范帮你一键搞定，代码清爽到飞起！

前言

在前端开发中，随着项目规模的扩大，CSS代码的组织和维护变得越来越具有挑战性。开发者常常面临类名冲突、样式覆盖、代码难以维护等问题。为了解决这些问题，各种CSS命名规范和方法论应运而生，而BEM（Block-Element-Modifier）作为其中最流行和实用的方法之一，被越来越多的开发团队所采用。

接下来我就将带大家学习BEM命名规范，编写出更加模块化、可维护的前端代码。

一、什么是BEM命名规范？

BEM是Block（块）、Element（元素）、Modifier（修饰符）的缩写，是一种基于组件的Web开发方法论。它由Yandex团队提出，旨在帮助开发者创建可重用和可维护的代码结构。

BEM命名规范主要解决了CSS中的命名冲突和样式覆盖问题，通过明确的命名约定，使代码结构更加清晰，便于团队协作和项目维护。

二、BEM的三个核心概念

1. Block（块）

Block是一个独立的组件，可以在项目中重复使用，且不依赖于页面上的其他组件。

命名规则：使用小写字母，多个单词之间用连字符（-）连接。
示例：
css 复制代码
```
.header {}
.menu {}
.search-form {}
```

Block就像是一个独立的"积木"，可以放置在页面的任何位置，并且保持其功能和样式的一致性。

2. Element（元素）

Element是Block的组成部分，不能脱离Block单独使用。

命名规则：Block名称 + 双下划线（__）+ Element名称。

示例：

css 复制代码

.menu__item {}
.search-form__input {}
.header__logo {}

Element就像是Block这个"积木"上的某个特定部分，它们共同构成了完整的Block功能。

3. Modifier（修饰符）

Modifier用于定义Block或Element的外观、状态或行为。

命名规则：
- 对于Block的修饰：Block名称 + 双连字符（--）+ Modifier名称
- 对于Element的修饰：Block名称__Element名称 + 双连字符（--）+ Modifier名称

示例：

css 复制代码

/* Block修饰符 */
.menu--fixed {}
.button--large {}

/* Element修饰符 */
.menu__item--active {}
.search-form__input--disabled {}

Modifier就像是给"积木"或其部分添加特定的标签，表明它们处于某种特殊状态或具有特殊外观。

三、BEM命名规范的优势

1. 提高代码可读性

BEM命名方式直观地反映了HTML结构，使开发者能够通过类名就了解元素之间的关系。

html 复制代码

<form class="search-form">
  <input class="search-form__input">
  <button class="search-form__button search-form__button--primary">搜索</button>
</form>

从上面的代码中，我们可以清晰地看出：

search-form是一个独立的块
input和button是这个块的元素
button有一个primary的修饰符

2. 降低CSS选择器的特异性

BEM鼓励使用单一类名选择器，避免使用标签名和ID选择器，从而降低了CSS选择器的特异性，减少了样式冲突的可能性。

css 复制代码

/* 不推荐 */
form.search-form > input[type="text"] {}

/* 推荐 */
.search-form__input {}

3. 提高代码的可维护性

BEM的命名规则使得样式与HTML结构紧密关联，当需要修改某个组件时，可以很容易地找到相关的CSS代码。

4. 促进模块化开发

BEM鼓励开发者以组件的思维方式构建界面，每个Block都是独立的，可以在不同的项目中重复使用。

四、BEM在实际项目中的应用

基本示例

以一个简单的导航菜单为例：

html 复制代码

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link nav__link--active">首页</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">关于我们</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">服务</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">联系我们</a>
    </li>
  </ul>
</nav>

对应的CSS：

css 复制代码

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin-right: 20px;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__link--active {
  font-weight: bold;
  border-bottom: 2px solid white;
}

复杂示例

对于更复杂的组件，如一个带有标题、内容和操作按钮的卡片：

html 复制代码

<div class="card">
  <div class="card__header">
    <h2 class="card__title">文章标题</h2>
    <span class="card__date">2023-05-15</span>
  </div>
  <div class="card__content">
    <p class="card__text">这是文章的内容...</p>
    <img class="card__image" src="image.jpg" alt="图片描述">
  </div>
  <div class="card__footer">
    <button class="card__button card__button--primary">阅读更多</button>
    <button class="card__button card__button--secondary">分享</button>
  </div>
</div>

对应的CSS：

css 复制代码

.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.card__header {
  padding: 15px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__title {
  margin: 0;
  font-size: 18px;
}

.card__date {
  color: #666;
  font-size: 14px;
}

.card__content {
  padding: 15px;
}

.card__text {
  margin-top: 0;
}

.card__image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}

.card__footer {
  padding: 15px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: flex-end;
}

.card__button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.card__button--primary {
  background-color: #007bff;
  color: white;
}

.card__button--secondary {
  background-color: #6c757d;
  color: white;
}

五、BEM的常见问题与解决方案

1. 类名过长

当项目结构复杂时，BEM类名可能会变得很长，影响代码的可读性。

解决方案：

使用简短但有意义的Block和Element名称

考虑使用预处理器（如SASS或LESS）的嵌套功能来简化编写

在SASS/SCSS中，&符号表示父选择器的引用，可以大大简化BEM风格的CSS编写：

scss 复制代码

.card {
  &__header { /* .card__header */ }
  &__title { /* .card__title */ }

  &__button {
    /* .card__button */
    &--primary { /* .card__button--primary */ }
    &--secondary { /* .card__button--secondary */ }
  }
}

2. 嵌套元素的命名

当元素嵌套层级较深时，可能会出现命名困难的情况。

解决方案 ：BEM不推荐反映DOM结构的类名，如.block__elem1__elem2。应该始终保持扁平的命名结构：.block__elem1和.block__elem2。

html 复制代码

<!-- 不推荐 -->
<div class="card">
  <div class="card__content">
    <div class="card__content__section">...</div>
  </div>
</div>

<!-- 推荐 -->
<div class="card">
  <div class="card__content">
    <div class="card__section">...</div>
  </div>
</div>

3. 何时创建新的Block

有时候很难判断应该创建一个新的Block还是继续使用Element。

判断标准：如果一个组件可以在不同的上下文中独立使用，那么它应该是一个Block；如果它只在特定Block中使用，那么它应该是一个Element。

结论

BEM命名规范是一种强大的CSS组织方法，它通过明确的命名约定，帮助开发者创建模块化、可维护的CSS代码。虽然在某些情况下类名可能会变得冗长，但其带来的代码清晰度和维护性的提升远远超过了这一小缺点。无论是小型项目还是大型应用，采用BEM命名规范都能帮助你构建更加健壮和可扩展的前端代码结构。

如果这篇文章有帮助到你，不胜荣幸；如果文章有错误或者缺漏，请在评论区指出，大家一起进步，谢谢🙏。