BEM/SMACSS方法论

以下是关于 BEM（Block Element Modifier） 和 SMACSS（Scalable and Modular Architecture for CSS） 两大 CSS 架构方法论的系统梳理，涵盖基础概念、核心规则、进阶实践及对比分析：

---

一、BEM 方法论

1. 核心理念

• 目标：通过严格的命名约定解决 CSS 类名冲突、提高代码可维护性。
• 三个核心概念：
  • Block（块）：独立且有意义的 UI 组件（如 .header、.menu）。
  • Element（元素）：块的组成部分，不能独立存在（如 .menu__item）。
  • Modifier（修饰符）：表示块或元素的状态或变体（如 .button--disabled）。

2. 命名规则

• 块：单一类名，全小写短横线分隔（如 .search-form）。
• 元素：块名 + __ + 元素名（如 .search-form__input）。
• 修饰符：块或元素名 + -- + 修饰符名（如 .search-form--dark）。
• 示例：

  <div class="card card--highlighted">
    <h2 class="card__title">标题