什么是 BEM 规范

BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。

BEM 命名规范的基本概念

1. Block（块）：代表一个独立的组件，类似于一个功能模块。例如，一个导航栏或按钮。
2. Element（元素）：代表块的组成部分，与块紧密相关，但不能单独存在。例如，按钮中的图标或导航栏中的菜单项。
3. Modifier（修饰符）：代表块或元素的不同状态或变体，用于修改块或元素的外观或行为。例如，按钮的大小或颜色变化。

命名规则

BEM 的命名规则使用两个连接符：

• 双下划线（__）：用于连接块和元素。
• 双破折号（--）：用于连接块或元素与修饰符。

示例

HTML

<div class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__item--active">首页</li>
    <li class="nav__item">关于</li>
    <li class="nav__item">联系</li>
  </ul>
</div>

CSS

/* 块 */
.nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

/* 元素 */
.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav__item {
  margin-right: 15px;
}

/* 修饰符 */
.nav__item--active {
  font-weight: bold;
}

BEM 的优点

1. 可读性：通过明确的命名规则，开发者可以快速理解代码的结构和含义。
2. 可维护性：清晰的命名规范使得修改和扩展代码变得更加容易。
3. 复用性：通过块和修饰符的组合，可以方便地创建可复用的组件。
4. 避免冲突：BEM 命名规范通过特定的命名方式，减少了样式命名冲突的可能性。

BEM 的缺点

1. 冗长：BEM 的命名规则可能导致类名较长，影响代码的简洁性。
2. 学习曲线：对于初学者来说，需要一些时间来熟悉和掌握 BEM 的命名规范。