SCSS嵌套超过三层会导致选择器权重失控、渲染性能下降、调试困难及覆盖失效；三层内安全，四层起易引发闪烁、延迟、误用&符号等问题，应优先采用BEM或@at-root提级。
SCSS嵌套超过三层，不是“写得不够深”，而是CSS选择器权重已经失控，后续几乎必然要靠 !important 或更长的选择器硬顶——这不是调试技巧，是设计返工的信号。
浏览器从右往左匹配，深层嵌套直接拖慢渲染
浏览器解析 .a .b .c .d:hover 时，先找所有 :hover 元素，再逐层向上验证父级是否存在。每多一层，匹配路径就指数级变复杂。尤其在动画或滚动场景下，重排重绘压力明显增大。
- 三层以内（如
.card .card__title:hover）属于安全范围，DevTools 的 “Coverage” 面板通常能稳定识别有效规则 - 四层开始（
.page .layout .main .content p）在低配安卓设备上已观察到样式闪烁或延迟生效 - 嵌套里塞媒体查询（
@media (min-width: 768px) { .a { .b { .c { ... } } } }）会让编译输出变成冗长不可读的@media {...} .a .b .c {...}，调试时根本找不到断点位置
& 符号在深层嵌套中极易误用
& 不是“当前缩进上下文”，而是“最近一层父选择器的完整字符串”。嵌套越深，& 指向越容易出人意料。
- 错误写法：
.card { .header { .title { &.active { ... } } } }→ 编译为.card .header .title.active（权重 0,0,3,0），但你本意可能是.card__title.active - 正确做法：把
$block: ".card"提前定义，用#{$block}__title显式拼接，避免依赖&的隐式行为 - 有空格和没空格区别极大：
&.active是同元素加类，& .active（注意空格）却是后代选择器——这种细微差别在四层嵌套里极难肉眼识别
权重爆炸后，覆盖逻辑彻底失效
一个 .a .b .c .d 选择器权重是 0,0,4,0；而你想用单个类名 .text-highlight（权重 0,0,1,0）去覆盖它？基本不可能，除非加 !important 或写成 .a .b .c .d.text-highlight。
- 第三方 UI 库（如 Ant Design、Element Plus）普遍用单类名 +
!important控制基础样式，你的四层嵌套反而成了最弱一环 - Vue/React 的 scoped 样式（如
.btn[data-v-abc123]）不会降低特异性，只是加了属性选择器——嵌套越深，最终生成的.a[data-v-x] .b[data-v-x] .c[data-v-x]权重照样飙升 - 用
@at-root强制提级是最快止损方式，比如状态覆盖、主题切换这类“逻辑相关但DOM无关”的样式，直接跳出嵌套链更干净
真正难的不是写四层嵌套，而是改——当一个 .modal .overlay .content .form .input:focus 出现冲突时，你得在 HTML、SCSS、DevTools 三端来回跳转才能定位问题根源。这时候，BEM 的 .modal__input--focused 一行就能解决的事，别用缩进换麻烦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
