本文讲解在遵循 bem 命名规范的前提下，利用 sass 的嵌套与 & 运算符，避免重复声明多个块（如 .section1__title 和 .section2__title）的相同样式，实现语义清晰、可维护性强的 css 组织方式。
本文讲解在遵循 bem 命名规范的前提下，利用 sass 的嵌套与 & 运算符，避免重复声明多个块（如 .section1__title 和 .section2__title）的相同样式，实现语义清晰、可维护性强的 css 组织方式。
在 BEM（Block-Element-Modifier）方法论中，每个块（Block）应保持语义独立、作用域隔离；而 Sass 作为预处理器，提供了强大的嵌套和选择器复用能力。当多个块（如 .section1 和 .section2）下存在结构一致、视觉表现相同的元素（例如标题 __title），直接为每个块单独编写嵌套规则会导致冗余代码，违背 DRY（Don’t Repeat Yourself）原则——但又不能简单提取公共类（如 .shared-title），否则会破坏 BEM 的语义完整性与组件封装性。
正确的做法是：将具有共性样式的块选择器合并书写，并在嵌套中使用 &__element。Sass 的 & 会分别拼接每一个父选择器，自动生成符合 BEM 规范的并集选择器：
.section1,
.section2 {
// 公共块级基础样式（可选）
padding: 2rem 0;
background-color: #f9f9f9;
&__title {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
&__subtitle {
font-size: 1.25rem;
color: #7f8c8d;
}
&__content {
line-height: 1.6;
}
}
编译后生成的标准 CSS 完全符合 BEM 要求：
.section1, .section2 {
padding: 2rem 0;
background-color: #f9f9f9;
}
.section1__title, .section2__title {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.section1__subtitle, .section2__subtitle { /* ... */ }
.section1__content, .section2__content { /* ... */ }
✅ 优势总结：
- ✅ 严格遵循 BEM：所有类名均为
__ 形式，无全局污染； - ✅ 零额外 HTML 类：无需添加非语义的共享类（如 class="section1__title shared-heading"）；
- ✅ 可扩展性强：新增类似块（如 .section3）时，只需将其加入父选择器列表即可统一继承；
- ✅ 逻辑内聚：相关样式集中定义，便于维护与主题切换。
⚠️ 注意事项：
- 仅对真正具备视觉与语义一致性的元素才适用此写法。若 .section1__title 与 .section2__title 在未来需差异化设计，应拆分为独立块规则，避免过度耦合；
- 避免过度嵌套（如三层以上），建议单个 Sass 规则控制的块数 ≤ 4～5 个，以保障可读性；
- 推荐配合 @extend 或占位符选择器（%placeholder）处理跨块的抽象样式逻辑（如排版基线、间距系统），但切勿用于覆盖 BEM 元素层级关系。
综上，在 BEM + Sass 工程中，“合并父选择器 + &__element” 是兼顾规范性、简洁性与可维护性的标准实践，既尊重了 BEM 的模块边界，又充分发挥了 Sass 的表达力。
