BEM的__和--不能靠SCSS嵌套自动拼出，必须用@at-root+&插值或手动写全名；&仅代表完整前缀，伪类中误用会导致非法类名；Modifier须扁平提级，避免嵌套污染。
SCSS嵌套里怎么写BEM的__和--才不踩坑
直接说结论：BEM的双下划线 __ 和双破折号 -- 不能靠纯嵌套自动拼出来，必须手动写全名或用 @at-root + & 拼接。很多人以为 &__content 能在子选择器里自动补前缀，结果编译出错或样式没生效，就是卡在这儿。
常见错误现象：.card { &__title { color: red; } } 编译后是 .card .card__title（多了一个空格），但BEM要求的是 .card__title（无空格）。这是嵌套默认行为，不是bug，但不符合BEM语义。
- 正确写法是用
@at-root把子元素提级：.card { @at-root #{&}__title { color: red; } } - 或者更稳妥地手动写全：
.card__title，别依赖嵌套“猜”结构 - 如果组件名是变量（比如
$block: "button"），就用插值：@at-root #{$block}__icon
Sass的&符号在BEM里什么时候该用、什么时候禁用
& 是SCSS嵌套的核心，但在BEM中它容易误导人——你以为 & 总代表父块名，其实它只代表当前选择器的**完整前缀**，包括伪类、属性选择器等。一不留神就生成了 .btn:hover__text 这种非法名。
使用场景很明确：只在纯粹的块级嵌套中用 & 拼接 __ 或 --；其他情况一律避免。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全用法：
.header { @at-root #{&}__logo { ... } @at-root #{&}--fixed { ... } } - ❌ 危险用法：
.nav { &:hover { &__item { ... } // 编译成 .nav:hover__item，非法 } } - 性能影响：过度依赖
@at-root+ 插值会让CSS输出顺序变乱，尤其在多个文件@import时，建议把BEM修饰类集中写在块定义末尾
为什么BEM的Modifier（--）不能用嵌套里的&直接拼
因为 -- 是修饰符，语义上属于同一层级的独立类名，不是子元素。用 &--large 看似省事，但一旦父选择器带了层级（比如 .sidebar .widget），& 就会把整个路径都拼进去，生成 .sidebar .widget--large —— 这违反BEM“一个块一个根”的原则，也导致样式无法复用。
真实项目里最常踩的坑是：开发时只在局部测试，上线后发现 --disabled 在嵌套路由页里失效，查半天才发现是选择器权重被父级拖垮了。
- 必须确保修饰符类名是扁平的：
.button--primary，不是.form .button--primary - 推荐写法：把所有
--类统一放在块定义底部，用@at-root提级，不嵌套进任何状态伪类里 - 兼容性提醒：老版本Sass（@at-root，如果还在用，老老实实手写全名
如何让SCSS嵌套既保持可读性又不破坏BEM约束
核心矛盾在于：嵌套提升可读性，但BEM要求类名扁平、语义清晰。折中方案不是“少嵌套”，而是“分层嵌套”——只在逻辑组内嵌套，不跨BEM层级。
比如一个卡片组件，结构是 .card（块）、.card__header（元素）、.card--shadow（修饰符），那就把 __header 相关样式在 .card 下用 @at-root 写，而 --shadow 单独提一层，不跟 :hover 套在一起。
- 可读性技巧：用空行+注释区分BEM层级
// Block .card { ... } // Element .card { @at-root #{&}__body { ... } } // Modifier（独立一级，不嵌套） .card--fluid { ... } - 团队协作时，禁止在
@mixin里封装BEM拼接逻辑——看似方便，实则让类名来源不可追溯 - 最容易被忽略的一点：BEM的“块”必须对应一个真实DOM节点。如果SCSS里写了
.card__footer，但HTML里漏了class="card__footer"，嵌套再漂亮也没用
