4层CSS选择器嵌套是浏览器在低端设备上的硬性性能临界点，实测会导致掉帧；BEM命名与@at-root提级等手段旨在消除向上遍历回溯，保障渲染性能。
4层嵌套就是硬性性能临界点，不是“建议别写”，是浏览器在低端设备上实测会掉帧的红线。
浏览器匹配CSS是从右往左查的，不是顺着DOM往下找
写 .page .main .content .card .title，浏览器不会先找 .page 再钻进去——它先找出所有 .title 元素，再对每个逐个向上验证：父级是不是 .card？那个 .card 的父级是不是 .content？……每多一层，就多一次 DOM 向上遍历。DOM 节点超 500 个时，Recalculate Style 阶段很容易突破 20ms，滚动直接卡顿。
这不是理论值，是低端 Android WebView 实测数据：4 层就是临界点。
-
.card__title匹配快，因为只查一个类名，零回溯 -
.card .title就要回溯，哪怕只有两层，高频更新区域（如虚拟滚动列表）也会反复触发昂贵匹配 -
:not()、:has()、属性选择器会进一步放大回溯开销
@at-root 不是“逃逸键”，它只解决本不该继承前缀的场景
@at-root 的作用不是给 4 层缩进打补丁，而是明确告诉 Sass：“这段样式逻辑上属于当前组件，但输出时不能带父级前缀”。滥用它来“救”深层结构，只会掩盖问题。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.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，会产出 6 层选择器
BEM 不是命名习惯，是切断匹配路径的协议
BEM 的 card__title 不是为了“好看”，是让浏览器彻底跳过向上查找父级的过程。它要求这个类名必须真实出现在 HTML 中：<h2 class="card__title">✅；如果只写 <h2 class="title">，哪怕 CSS 里写了 .card .title，照样触发三层回溯 ❌。
- 禁止
card__header__logo这种跨层 Element，应拆成card__header和card__logo - 修饰符必须能独立存在：
button--loading不能依赖button类才生效，否则element.classList.add("button--loading")会失效 - 工具类必须提级：
@at-root .u-text-center { text-align: center; }→ 输出.u-text-center，不带任何父前缀
真正难的不是写出 card__title，而是在重构时坚持让 HTML 真实应用它——而不是把 <h2 class="card__title"> 改成 <div class="card__title"><h2></h2></div> 后还指望样式生效。
