BEM 是一种前端 CSS 命名方法论，全称是 Block Element Modifier。它的核心思想是将用户界面拆分成独立的块（Block），通过元素（Element）和修饰符（Modifier）来描述其状态和结构，以此来解决 CSS 样式冲突、命名混乱以及代码难以维护的问题。

一、BEM 的三大组成部分

1. Block（块）

• 定义：独立的、可复用的组件，代表一个页面中的“独立实体”。
• 特点：可以嵌套，但本身具有独立性；可以放在任何位置。
• 命名：使用单词或缩写，用连字符 - 连接（如果单词较多），通常没有前缀。
• 示例：

  .menu { ... }
  .search-form { ... }
  .header { ... }
  

2. Element（元素）

• 定义：块的组成部分，不能脱离块单独使用。
• 特点：元素与块之间是“属于”的关系，在命名上明确其从属。
• 命名：块名 + __（两个下划线） + 元素名。
• 示例：

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

3. Modifier（修饰符）

• 定义：描述块或元素的状态、外观或行为的变体。
• 特点：用于改变样式（如高亮、禁用、尺寸等），而非改变结构。
• 命名：块名或元素名 + --（两个连字符） + 修饰符名。
• 示例：

  .menu--horizontal { ... }
  .menu__item--active { ... }
  .search-form__button--disabled { ... }
  

二、完整的 BEM 命名示例

HTML 结构：

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

CSS 样式：

.search-form { ... }                     /* Block */
.search-form--large { ... }              /* Block Modifier */
.search-form__input { ... }              /* Element */
.search-form__button { ... }             /* Element */
.search-form__button--primary { ... }    /* Element Modifier */

三、BEM 的核心优势

1. 可读性强
   通过命名就能清晰了解 HTML 结构和组件关系，例如 .user-card__avatar--large 一眼就能看出是“用户卡片组件中的头像，且为大尺寸”。

2. 避免样式冲突
   每个类名都是唯一的，且不依赖页面结构（如无嵌套选择器 .menu .item），避免了 CSS 作用域污染。

3. 模块化与可复用性
   组件（Block）独立，可以在项目的不同页面、不同位置随意复用，而无需担心样式错乱。

4. 便于团队协作
   统一的命名规则让团队成员即使不熟悉代码，也能快速理解和维护样式。

四、注意事项与常见变体

• 避免过深嵌套：Element 通常只表示直接子级，如果需要更深层级，应考虑拆分新的 Block，而不是写成 .block__elem1__elem2。
• 修饰符不要单独使用：修饰符必须与 Block 或 Element 组合使用（例如 .button--primary 不能脱离 .button 单独存在）。
• 命名分隔符可调整：虽然官方是 __ 和 --，但有些团队为了简洁会使用单下划线或驼峰，但核心思想不变。
• 配合 CSS 预处理器：Sass/Less 中可以借助 & 符号简化书写：

  .search-form {
    &__input { ... }
    &__button {
      &--primary { ... }
    }
  }
  

五、总结

BEM 不是一套框架或库，而是一种命名规范和组件化思维。它通过严格的命名约定，让 CSS 代码具备高可读性、高可维护性，尤其适合大型项目或多人协作的场景。虽然名字看起来有些冗长，但换来的代码清晰度和协作效率提升，在复杂项目中是非常值得的。