SCSS嵌套过深会显著降低浏览器运行时性能。浏览器从右向左匹配选择器，每多一层嵌套就增加一次DOM向上遍历，5层嵌套在低端WebView中CPU常飙至90%+，导致滚动卡顿、hover延迟、样式失效等问题。
SCSS嵌套层级过深不会拖慢编译速度，但会直接生成高权重、长路径的CSS选择器，让浏览器在运行时反复回溯DOM，滚动卡顿、hover发滞、DevTools里样式变灰——这不是“写法不够优雅”的问题，是真实可测的性能崩坏。
浏览器匹配选择器是从右往左，不是从上往下
写 .layout .main .content .card .title 这种5层选择器时，浏览器不会先找 .layout 再钻进去，而是：先找出所有 .title 元素，再对每个 .title 向上检查父级是否为 .card，再查该 .card 的父级是否为 .content……每多一层，就多一次DOM向上遍历。
DOM节点超500个（比如商品列表页）时，Recalculate Style 阶段很容易超20ms；低端Android WebView实测中，4层就是硬性临界点，5层以上CPU常飙到90%+。
常见错误现象包括：
-
element.classList.add("is-active")失效（样式根本没匹配上） - DevTools “Computed” 面板里生效规则被压在几十条灰色规则下
- 改一个HTML class，要同步调三处CSS才能生效
Stylelint的max-nesting-depth必须配对插件才生效
只写 "max-nesting-depth": 3 在SCSS项目里是无效的——默认解析器不认识 & 嵌套，也不会把 .card { &__title { } } 识别为2层深度。
正确配置需显式声明语法和插件：
/** @type {import('stylelint').Config} */
export default {
plugins: ['stylelint-scss'],
customSyntax: 'postcss-scss',
rules: {
'max-nesting-depth': [3, {
ignore: ['at-rules'],
severity: 'error'
}]
}
};
漏掉 customSyntax 或插件，该规则会静默失效，连报错都不会触发。
设为3还是4？
- 设为3：适合原子化/Utility-First项目（如混用Tailwind），强制组件样式扁平
- 设为4：更贴近传统封装场景，允许
.dialog .dialog__body .dialog__title :is(h1, h2)这类合理组合 - 设为6或更高：等于放任
.layout .sidebar .nav .item .link:hover::before这种脆弱选择器滋生
@at-root不是逃逸键，是语义提级开关
@at-root 不是用来给4层缩进打补丁的，它只解决“逻辑上该平级，却被嵌套裹挟”的问题。
错误用法：
-
.modal { .overlay { @at-root .tooltip { top: -10px; } } }→ 输出.tooltip✅（合理提级工具类） -
.btn { @at-root { &--large { font-size: 18px; } } }→ 编译失败 ❌（@at-root后必须跟完整选择器） -
@media (min-width: 768px) { .card { &__body { } } }→ 若外层还有.layout .dashboard，会产出6层选择器，完全失控
真正该提级的是：
- 工具类（如
.u-text-center） - 媒体查询中的全局响应式逻辑
- 兄弟组件样式（如
.modal里定义.tooltip）
不该提级的是本就该属于当前语义层级的内容——那种情况，删掉嵌套比加 @at-root 更有效。
BEM不是命名规范，是匹配路径切断协议
BEM的核心作用，是让每个样式只依赖一个类名，彻底绕过浏览器向上查找父级的过程。它不是语法糖，是语义映射：card__title 必须显式出现在HTML中：，缺 card 就完全不匹配。
禁止 card__header__logo 这种跨层Element，应拆为 card__header 和 card__logo；也别用 .card { .header { .title { &.active { } } } }，这会编译出 .card .header .title.active，4层+状态类，权重拉满，后续几乎无法靠单类名覆盖。
最容易被忽略的一点：你写的嵌套结构，在编译后是否真的对应了HTML中真实存在的class链？如果HTML里没写 class="card"，那 .card .card__title 就永远不生效——这种“假耦合”比没样式还危险，因为它看起来像在工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
