BEM禁止深层嵌套，因其违背切断样式依赖链的初衷；元素和修饰符必须直属于块名，禁用DOM结构耦合、冗余&用法及错误修饰符绑定，应通过文件拆分、@layer、.when守卫等机制保障原子性与可组合性。
为什么BEM命名下还写深层嵌套是自找麻烦
因为BEM的初衷就是切断样式依赖链，而 @nest 或 &__element 深层嵌套会悄悄把组件耦合回 DOM 结构里。你改个 HTML 层级，CSS 就得跟着动；别人复用你的 .card，结果发现它只在 .page__main 下才生效——这不是组件，是快照。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 BEM 元素（
__）和修饰符（--）必须直接作用于块名，不跨层级嵌套。比如.card__title可以，但.card > .content > .card__title不行 - 用
@layer（Sass 1.3.0+）或文件级拆分替代嵌套逻辑：把card.scss、card__title.scss、card--featured.scss分开，靠命名而非缩进表达关系 - 如果真要条件化样式（比如“仅在暗色主题中修改 card header”），用
@if $theme == 'dark'+ 独立选择器，别用.theme--dark .card__header这种穿透式写法
Sass 中用 & 生成 BEM 类名时的三个典型翻车点
& 看似方便，但和 BEM 搭配时容易产出语义错位的选择器，比如生成出 .button.button--primary:hover 这种冗余结构，或者更糟：.form__field .input（漏了 __，破坏 BEM 原子性）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远用
&__element和&--modifier，禁用& .child或& > * - 修饰符必须绑定到块本身，不要写成
.card__header--large—— 正确的是.card--large .card__header，否则无法组合（.card--featured.card--large就失效） - 用 Sass 的
str-index()或自定义函数做简单校验：比如在@mixin b()里检查传入名是否含__或--，避免手误
LESS 里用 .when 做 BEM 条件编译，比 CSS 自定义属性更可控
很多人用 :root { --card-padding: 1rem; } 控制变量，但 BEM 组件常需整套样式开关（比如 .card--no-shadow 要同时关掉 box-shadow、border、hover 效果），纯 CSS 变量做不到这种“块级状态切换”。LESS 的 .when 守卫能真正按修饰符分支输出规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把修饰符作为参数传入 mixin：
.card(@mod: default) when (@mod = no-shadow) { box-shadow: none; border: none; } - 避免在
.when里写复杂逻辑，只做布尔/枚举判断；数值计算放顶层变量，比如@card-padding-base: 1rem;，再由@mod决定是否覆盖 - 编译后检查 CSS 输出：确认
.card--no-shadow确实只包含该修饰符相关声明，没带出其他块的样式（常见坑：&__footer在.when外被意外注入）
重构老项目时，如何安全地把深度嵌套 SASS 拆成 BEM
直接重命名加 __ 不解决问题——HTML 里还是 <div class="sidebar">
<h3 class="title">，CSS 却写成 <code>.sidebar__title，浏览器照样匹配不上。关键在「HTML-CSS 同步迁移」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用正则批量替换 HTML：
class="title"→class="sidebar__title"，但只针对明确父容器下的子元素（用 VS Code 多光标或sed -i配合路径限定） - 在 Sass 中临时开启
!important标记过渡期样式（如.sidebar__title { font-size: 1.2rem !important; }），确保视觉不跳变 - 用 Puppeteer 写简短脚本，遍历页面所有
.sidebar实例，检查其内部是否存在未升级的.title类——这类漏网之鱼最易引发回归问题
BEM 不是命名规范，是约束 DOM 和样式之间映射关系的契约。嵌套越深，契约越容易被无意撕毁；而重构时最耗神的，往往不是写新代码，是验证旧页面里那些没被测试覆盖的角落是否还在呼吸。
