嵌套超过3层时CSS必然失控：人眼误判层级、选择器爆炸、继承链断裂；特异性每层+10，.a .b .c .d比.d难覆盖100倍；Sass不校验父选择器存在性，&使用错误致样式静默失效。
嵌套层级超过 3 层时，CSS 就开始失控了
直接说结论：@nest（原生 CSS 嵌套）和 @extend 都不是万能解药，Sass 的嵌套逻辑本质是“视觉缩进 → 选择器拼接”，但人眼误判层级、编译后选择器爆炸、继承链断裂，这三个问题在嵌套超过 3 层时几乎必然出现。
真实项目里，你看到的 .header .nav .item .link:hover 往往来自 4 层嵌套，而它真正需要的可能只是 .nav-link:hover —— 嵌套没帮上忙，反而掩盖了语义缺失。
- 嵌套每深一层，生成的选择器特异性（specificity）就+10，
.a .b .c .d比.d难覆盖 100 倍 - Sass 编译不校验父选择器是否存在，
.card { .footer { ... } }若实际 DOM 没.card包裹.footer，样式就静默失效 - 用
&连写伪类或兄弟选择器时，&:hover + &看似简洁，但可读性断崖下跌，团队新人基本靠猜
Sass 中 & 的三种典型误用场景
& 是 Sass 嵌套的核心符号，但它只代表“当前选择器”，不是“父元素”。混淆这点，90% 的嵌套 bug 就来了。
常见错误现象：写完 .btn { &--primary { ... } }，结果 .btn--primary 样式没生效；或者 .list { li { & + li { margin-top: 8px; } } } 编译出 .list li + .list li，完全不是想要的相邻 li 关系。
立即学习“前端免费学习笔记（深入）”；
- 想写 BEM 的修饰符？必须显式写出完整块名：
.btn { &--primary { ... } }✅；但.btn { .btn--primary { ... } }❌（会生成.btn .btn--primary，多了一层后代） - 要选同级元素？
& + &只在同一个父级下有效，且只对直接兄弟起作用；若中间隔了 wrapper，得退回到非嵌套写法 - 伪类组合如
&:hover:focus没问题，但&:not(:hover)在旧版 Sass 里会报错，需升级到 Dart Sass 1.33+
什么时候该停手，改用 @use + 原子类
当一个组件的样式开始同时满足以下三条，嵌套就该叫停了：
- 需要被多个不相关容器复用（比如
.tooltip出现在.header和.table-cell里） - 内部有 2+ 个需独立开关的状态（
is-open/is-error/is-loading） - 存在 JS 动态增删 class 的逻辑（React/Vue 中 class 绑定频繁）
这时硬塞进嵌套结构，只会让 .modal.is-open .modal__content 和 .modal__content.is-open 两种写法并存，维护成本翻倍。更稳妥的做法是用 @use 引入原子类模块：
@use 'atoms/button';
// 编译后生成独立类名，无嵌套依赖
// .button {}
// .button--primary {}
// .button--sm {}
性能影响很小 —— Dart Sass 的 @use 是静态解析，不增加运行时开销；兼容性也无顾虑，只要不用 @use 的循环引用，所有现代构建工具都支持。
调试嵌套输出的最快方法：看编译后的 CSS，而不是 .scss 文件
很多开发者卡在“明明写对了，为啥没效果”，根本原因是没意识到 Sass 编译器根本不关心你的缩进意图，只机械拼接字符串。
例如这段代码：
.card {
&__header { color: #333; }
&__body { padding: 16px; }
.btn { background: blue; }
}
最后一行 .btn 不带 &，编译结果是 .card .btn，而非 .card__btn —— 但你在编辑器里根本看不出这个空格差异。
- 永远打开 devtools 的 “Styles” 面板，右键元素 → “Show all styles”，直接查最终生成的选择器
- VS Code 安装 “Sass (syntax highlighting)” 插件，它会把漏掉
&的普通 class 名标成灰色，帮你快速识别“意外脱离嵌套” - 禁用
stylelint-config-sass-guidelines的no-duplicate-selectors规则 —— 它会误报合法的嵌套变体（如&.is-active和&:active）
最麻烦的不是写错，而是写对了却信不过编译结果，反复怀疑自己。盯住浏览器里真实的 CSS，比盯着缩进对齐可靠得多。
