SCSS嵌套本身不慢，但CSS选择器超4层会导致浏览器从右往左匹配时频繁回溯父级，引发运行时卡顿；BEM和@at-root是切断匹配路径、控制权重的关键手段。
SCSS嵌套本身不慢，但编译出的 CSS 选择器一旦超过 4 层（如 .page .main .content .card .title），浏览器从右往左匹配时就要对每个 .title 元素逐级向上验证父级，DOM 越深、重绘越频繁（比如滚动列表），CPU 消耗就越不可控——这不是编译卡顿，是运行时真卡。
为什么 4 层就是临界点
浏览器匹配选择器不是“从左到右走 DOM 树”，而是“从右往左查候选元素再回溯父级”。.a .b .c .d 的过程是：
- 先找出所有
.d元素 - 对每个
.d，检查其父级是否为.c - 再检查该
.c的父级是否为.b - 最后确认该
.b的父级是否为.a
每多一层，候选元素的验证链就多一次遍历。实测在低端 Android 设备上，4 层已触发明显滚动卡顿；5 层以上，layout 触发频率高的区域（如虚拟滚动列表）CPU 占用常飙至 90%+。
常见错误现象包括：element.classList.add("is-active") 失效、DevTools “Computed” 面板里生效样式被压在几十条灰色规则下、改一个 class 要同步调三处 CSS —— 这些都不是覆盖逻辑错了，是选择器太长、权重太高、根本没被正确匹配上。
立即学习“前端免费学习笔记（深入）”；
用 @at-root 提级工具类和兄弟组件样式
@at-root 不是逃逸键，是语义提级开关：当某段样式逻辑上属于当前组件，但不该继承嵌套路径时，必须显式提级，否则会产出冗余选择器。
- 错误写法：
.modal { .header { @extend %text-center; } }→ 编译出.modal .header .u-text-center，完全没必要 - 正确写法：
.modal { @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 { } } }，若外层还有 .layout .dashboard 嵌套，& 会展开全部路径，生成 @media (min-width: 768px) { .layout .dashboard .card__body { } }，6 层起步。
BEM 不是命名规范，是匹配路径切断协议
BEM 的核心作用，是让每个样式只依赖一个类名，彻底绕过浏览器向上查找父级的过程。它不是语法糖，是语义映射：把“这个标题属于卡片”编译成 card__title 这个原子类名，而非靠结构推导。
-
card__title必须显式出现在 HTML 中：<h2 class="card__title">，缺card就完全不匹配 - 禁止
card__header__logo这种跨层 Element，应拆为card__header和card__logo两个独立元素 - 状态靠 Modifier：
button--loading应能独立生效，不依赖button类存在，否则 JS 切换失败 - 禁用标签名参与组合：
ul.nav li a是高危写法，HTML 结构微调即全挂
常见错误是名义上用 BEM，实际仍靠嵌套保底。比如写 .card { .header { &__title { } } }，结果 & 指向 .header，编译出 .header__title，直接破坏 BEM 结构。
伪类和 & 嵌套最容易引发权重爆炸
& 在深层嵌套中会展开完整父路径，不是只拼类名。例如 .modal .content .form { &:hover { color: red; } } 编译出 .modal .content .form:hover（权重 0,3,1），而你本意可能只是想给 form 加悬停态，却意外比 .form--highlight（0,1,0）高两级，后续只能加 !important 或更深层嵌套来覆盖。
- 伪类必须紧贴单个语义类：
.button:hover✅，.button.is-active:hover✅，但.modal .content .button:hover❌ - ID 或属性选择器后禁用
&:hover：#header { &:focus { } }→#header:focus权重 100+，基本锁死后续覆盖 -
:not()不支持嵌套，.item { &:not(.active) { } }合法，但&:not(:not(.active))或&:not(.a):not(.b:hover)会编译出非法选择器，浏览器直接丢弃
真正难的不是写出浅层选择器，而是当产品需求倒逼你加一层容器类来控制状态时，能否守住 card__title--large 这种单类 + 修饰符的底线——而不是退回到 .card--featured .card__title。
