scss嵌套超3层直接产出低效css，因浏览器从右往左匹配选择器需逐级回溯验证父级，dom越深、重绘越频繁（如滚动列表）则cpu消耗越大，4层即为性能临界点。
SCSS嵌套超3层直接产出低效CSS，不是编译慢，是运行时拖慢渲染
浏览器匹配选择器从右往左回溯，.page .main .content .card .title 要先找所有 .title，再逐级验证父级是否存在。DOM越深、重绘越频繁（比如滚动列表），这个过程就越吃CPU。这不是SCSS编译问题，是你写的嵌套结构在生成运行时的“坏选择器”。
常见错误现象包括：!important 满天飞、组件样式在父容器里突然失效、DevTools里找不到对应规则——这些往往不是覆盖逻辑错了，而是选择器太长、权重太高、根本没被正确匹配上。
- 4层是临界点：一旦出现
.a .b .c .d，优先重构，别硬扛 - 标签名嵌套（如
ul li a）最危险：HTML结构一变，样式全挂 - 子选择器
>比后代选择器（空格）更可控，但不能靠它“救”深层嵌套
用 @at-root 提级输出，而不是靠缩进“假装有上下文”
@at-root 不是语法糖，是明确告诉Sass：“这段样式不属于当前嵌套路径，请提级到顶层输出”。它解决的是“逻辑上属于组件，但不该继承父选择器”的场景。
比如你在 .modal 块里写工具类或兄弟组件样式，硬撑嵌套会产出 .modal .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里滥用&嵌套：@media (min-width: 768px) { .card { &__body { } } }外层若还有嵌套，&会展开全部路径，生成不可控长选择器
用 %placeholder + @extend 替代深层嵌套，但必须守三条铁律
@extend 不是“复用样式”，是“合并选择器”。滥用会让CSS体积爆炸，尤其多个组件共用同一基础类时。真正安全的路径是 %placeholder + 严格边界 + @mixin 补位。
% 占位符本身不输出任何CSS，只作为继承锚点。但它必须满足硬条件，否则调试崩溃、线上漏样式：
- 必须以
%开头声明，例如%text-emphasis；写成.text-emphasis或text-emphasis都无效 - 必须被至少一个
@extend调用，否则编译后彻底消失——你查不到它，也 debug 不到它 - 不能出现在嵌套规则内部：
.card { .title { @extend %heading; } }是危险操作，Sass 会尝试拼接.card .title和%heading的全部上下文路径，产出类似.card .card .title的冗余选择器
BEM命名 + 显式类名，比依赖嵌套“模拟DOM结构”更可靠
BEM不是加几个下划线，是把语义“拍平”进类名里。.nav__item 不依赖 .nav 是否存在，也不关心它在不在 .header 里。样式只认一个class，耦合点从N个降到1个。
常见错误是名义上用BEM，实际仍靠嵌套保底。比如写 .card { .header { &__title { } } }，结果 & 指向 .header，编译出 .header__title，直接破坏BEM结构。
-
&__title前面不能有空格：.card { &__title { } }→.card__title；但.card { .title { &--large { } } }→.title--large，&只认最近一层父选择器 - Element不能嵌套Element：
card__header__title违规，应拆成card__header和card__title两个独立元素 - 想保留外层上下文？用变量暂存：
$block: ".card"; #{$block} { #{$block}__title { } }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
