SCSS嵌套超3层会严重降低维护效率，因选择器过长、权重过高、DOM变动易失效；4层为临界点，5层在低端Android已掉帧；应使用@at-root提级、BEM命名和%placeholder/@mixin安全复用。
SCSS嵌套超3层直接拖垮维护效率
不是编译慢，是生成的选择器太长、权重太高、DOM一动就失效。浏览器匹配 .page .main .content .card .title 时，先找所有 .title，再逐级往上验证父级是否存在——DOM越深、滚动越频繁，CPU消耗越不可控。4层就是临界点，5层在低端 Android 上已明显掉帧。
常见错误现象包括：!important 满天飞、DevTools 里样式被划掉却找不到覆盖源、改个 class 名 HTML 就崩、VS Code 的 CSS Peek 跳转停在错误层级。
- 嵌套超过3层时，
&的指向已不可靠：写.card { .header { .title { &.active { } } } }，本意是.card__title.active，实际产出.card .header .title.active（权重 0,0,3,0） -
&前有空格 → 后代选择器；没空格 → 拼接类名；它只认“上一层”，不回溯外层 - 标签约嵌套（如
ul li a）最危险：HTML 改成ol或加了 wrapper，样式全挂
用 @at-root 提级工具类和兄弟组件样式
@at-root 不是语法糖，是语义提级开关：告诉 Sass “这段样式逻辑上属于当前模块，但不该继承父路径”。硬撑嵌套会产出 .modal .header .u-text-center 这种冗余选择器，而你真正只需要 .u-text-center。
-
@at-root .u-text-center { text-align: center; }→ 输出.u-text-center，无前缀 -
@at-root (with: .theme-dark) { .button { color: white; } }→ 输出.theme-dark .button，可控加限定 - 媒体查询内慎用
&嵌套：@media (min-width: 768px) { .card { &__body { } } }若外层还有.layout .dashboard，会炸出 6 层选择器 -
@at-root (with: media)可提级媒体查询，但with:后只能跟media、rule、all，不能写screen
BEM 命名本质是切断浏览器匹配路径
BEM 不是命名习惯，是让每个样式只依赖一个类名，彻底绕过“从右往左回溯父级”的过程。.card__title 必须显式出现在 HTML 中：<h2 class="card__title">。缺 card 就完全不匹配，但也因此不再怕 DOM 结构变动。
立即学习“前端免费学习笔记（深入）”；
- 禁止
.card__header__logo这种跨层 Element，应拆为.card__header和.card__logo - 修饰符用
--：.button--primary，不是.button-primary，避免与组件名冲突 - 父子关系靠类名表达，而非嵌套结构：
.header .nav-link替代.header { .nav { .link { } } } - 抽离公共样式为独立类，再用后代选择器按场景定制：
.btn统一基础样式，.header .btn局部调整
%placeholder + @mixin 才是安全复用组合
@extend 是编译期合并选择器，滥用会让 CSS 体积爆炸；%placeholder 本身不输出 CSS，只作为继承锚点，但必须守三条铁律，否则调试崩溃、线上漏样式。
- 必须以
%开头声明，如%text-emphasis；写成.text-emphasis或text-emphasis都无效 - 必须被至少一个
@extend调用，否则编译后彻底消失 - 不能出现在嵌套规则内部：
.card { .title { @extend %heading; } }会产出.card .card .title这类冗余拼接 - 涉及 calc()、CSS 变量或响应式断点时，优先用
@mixin；它只插入声明，不合并选择器，更易调试
& 的行为完全由缩进和空格决定，而不是视觉层级；@at-root 提级后 & 失效，必须提前存变量或显式拼接；BEM 类名一旦写错，样式就彻底不生效——它不宽容，但换来的是可预测性。 
