BEM命名本身不解决模块化，因其仅是约定，无法自动隔离样式或复用逻辑；需结合Sass的@use、@mixin等机制，通过文件级Block封装、私有化导出、修饰符条件组合及限制嵌套层级，才能实现真正可维护的模块化。
为什么 BEM 命名本身不解决模块化，但和预处理器配合才真正起效
BEM（Block__Element--Modifier）只是一套命名约定，它不能自动隔离样式、避免污染或复用逻辑。真正提升维护性的，是把 BEM 的语义结构 + 预处理器（如 Sass）的 @mixin、@function、@import / @use 机制结合起来。否则光写 header__logo--large，照样可能在多个文件里重复定义颜色、间距、断点逻辑。
Sass 中用 @use 拆分 BEM 模块时的关键约束
每个 BEM Block 最好对应一个独立的 Sass 文件（如 _button.scss），且只暴露该 Block 内部的变量、mixin 和样式规则。使用时统一通过 @use "button" 导入，禁止直接 @import 或在全局作用域写 .button__text 的覆盖规则。
-
@use后所有成员默认私有，需显式用public标记可导出的 mixin/variable - Block 内部的元素（
__icon）、修饰符（--primary）必须全部在该文件内定义，不跨文件拼接选择器 - 避免在
@use的模块中写通用工具类（如.sr-only），这类应单独放在tools/目录下统一管理
修饰符（Modifier）别用 !important 覆盖，改用 Sass 的条件组合
常见错误是写 .button--disabled { opacity: 0.5 !important; } —— 这破坏层叠优先级，后期极难调试。正确做法是让修饰符参与选择器生成：
@mixin button-variant($bg, $color, $hover-bg) {
background-color: $bg;
color: $color;
&:hover { background-color: $hover-bg; }
}
.button {
@include button-variant(#007bff, white, #0056b3);
&--secondary {
@include button-variant(#6c757d, white, #545b62);
}
&--disabled {
@include button-variant(#adb5bd, #6c757d, #adb5bd);
cursor: not-allowed;
}
}
这样所有变体共享同一套基础样式逻辑，修改圆角、过渡时间只需改一处。
立即学习“前端免费学习笔记（深入）”；
嵌套层级超过 3 层就该警惕：BEM + Sass 不是鼓励无限嵌套
写成 .card .card__body .card__body-title .card__body-title-link:hover 是反模式。BEM 要求每个 __ 元素属于且仅属于一个 Block，所以 card__body-title-link 应直接作为 card 的子元素命名（即 card__title-link），而不是靠 DOM 结构推导。
- Sass 中嵌套应严格对应 BEM 层级：最多
&__element和&--modifier两级，不模拟 DOM 深度 - 若真需要组合行为（如
card--featured card__image--rounded），用独立的 utility class（rounded-lg）更可控 - 构建工具（如 PostCSS）可加
stylelint-selector-bem-pattern规则自动拦截非法命名
BEM 和预处理器的协同价值不在语法炫技，而在于把“谁改了什么样式”变成可追溯的文件路径 + 变量名。一旦开始用 @use 管理 Block、用 @mixin 抽离视觉状态、用命名强制语义边界，改一个按钮尺寸就不会牵出三个页面的布局错位 —— 但前提是，得忍住不把 __ 当嵌套深度用。
