7.2 BEM 命名规范

7.2 BEM 命名规范

BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在帮助开发者编写清晰、可维护、可复用的代码。它通过对类名的组织和命名方式提供结构化的思路，非常适合组件化开发和大规模项目的样式管理。

1. BEM 的核心概念

1. Block（块）

   • 表示独立的功能性模块。
   • 是页面中具有语义意义的最外层容器。
   • 例如：menu、button、card。

2. Element（元素）

   • 是 Block 的组成部分，无法脱离 Block 单独存在。
   • 使用双下划线 __ 连接 Block 和 Element。
   • 例如：menu__item、button__icon。

3. Modifier（修饰符）

   • 表示 Block 或 Element 的不同状态或版本。
   • 使用双连字符 -- 连接 Block/Element 和 Modifier。
   • 例如：menu__item--active、button--disabled。

2. BEM 的命名规则

类名格式

block__element--modifier

示例

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

对应的 CSS：

/* Block */
.menu {
  display: flex;
}

/* Element */
.menu__item {
  padding: 10px 20px;
  cursor: pointer;
}

/* Modifier */
.menu__item--active {
  font-weight: bold;
  color: #007bff;
}

3. BEM 的优势

1. 清晰的层次结构

   • 类名直观地体现了元素与块的从属关系。
   • 提高代码的可读性和可维护性。

2. 避免命名冲突

   • 每个模块的类名都独立，降低样式覆盖的风险。

3. 提高复用性

   • 修饰符可轻松实现模块或元素的状态变更，而无需重复书写样式。

4. 便于协作

   • 命名规范统一后，团队成员可以快速理解彼此的代码。

4. 如何在项目中应用 BEM

4.1 基础组件
使用 BEM 命名构建基础组件，例如按钮：

<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>

对应的 CSS：

.button {
  padding: 10px 20px;
  font-size: 16px;
}

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

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

4.2 复杂布局
对于复杂的模块，例如导航菜单：

<nav class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</nav>

对应的 CSS：

.navbar {
  background-color: #f8f9fa;
}

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

.navbar__item {
  padding: 10px 15px;
  cursor: pointer;
}

.navbar__item--active {
  font-weight: bold;
  color: #007bff;
}

5. BEM 的常见实践

1. 避免过长的类名

   • 虽然 BEM 命名本身可能较长，但不要过度嵌套或细分。
   • 合理设计 Block 和 Element 的关系。

2. 结合其他工具

   • 可以搭配预处理器（如 SASS/LESS）和 CSS Modules 使用，以进一步提高代码的组织性。

3. 命名中的前缀

   • 为了避免全局命名冲突，可以为项目或组件添加前缀。

   .myapp-navbar { ... }
   .myapp-navbar__item { ... }
   

6. 总结

BEM 命名规范为大型项目和团队协作提供了统一的命名规则，使代码更具可读性和可维护性。通过遵循 Block、Element、Modifier 的结构化命名方式，开发者可以构建模块化、复用性强的样式体系。