四层及以上css选择器会触发浏览器渲染性能拐点。实测显示，.a .b .c .d 在低端android webview中recalculate style时间比 .a__d 高3–5倍，且易导致样式闪烁、延迟生效及调试崩溃。
超过三层嵌套不是“写法不优雅”，而是会直接触发浏览器渲染性能拐点、权重失控和调试崩溃——实测中，.a .b .c .d 这类选择器在低端 Android WebView 中，Recalculate Style 时间比 .a__d 高出 3–5 倍。
浏览器从右往左匹配，四层就是性能临界点
浏览器不关心你写了几层缩进，它只解析最终生成的 CSS 选择器。遇到 .page .main .content .card .title，它得：先找所有 .title 元素，再逐个向上验证是否同时满足 .card → .content → .main → .page。DOM 节点越多、滚动越频繁，这个回溯链就越吃 CPU。
- 三层以内（如
.card .header .title）在 Chrome DevTools 的 Performance 面板里通常稳定 - 四层开始（
.a .b .c .d）在低配设备上已观测到样式闪烁、延迟生效 - 用
npx lessc input.less | grep -E "\.[a-z]+(\s+\.[a-z]+){3,}"可批量扫描项目中所有 4+ 层选择器
& 符号在深层嵌套里极易误判指向
& 不是“当前模块前缀”，而是“上一层父选择器的完整字符串”。嵌套越深，& 指向越反直觉，且会把整条路径权重一起带进去。
- 错误写法：
.theme-dark { .menu { &__item { } } }→ 编译为.theme-dark .menu .menu__item（权重 0,0,3,0） - 你以为想写
.menu__item.theme-dark，结果却生成了高权重后代链 -
&__title和& .title差一个空格：前者拼类名，后者变后代选择器——四层缩进下肉眼几乎无法分辨 - 真正安全的
&用法只限于单层块内：.card { &__title { } &--compact { } }
BEM 类名缺失导致 &__xxx 编译后完全不生效
&__title 编译成 .card__title，但这条规则只在 HTML 同时存在 class="card" 和 class="card__title" 时才命中。缺一不可。
- 常见失效场景：
<h2 class="title"></h2>（漏card）、<h2 class="card__title"></h2>却没包在<div class="card"> 里 <li>嵌套中误写：<code>.card { .header { &__title { } } }→.header__title（&指向的是.header，不是.card） - BEM 不是命名习惯，是 DOM 类名与 CSS 规则之间的硬映射：HTML 必须显式写出 Block 类名，CSS 才能按约定匹配
最常被忽略的点：问题不在 SCSS/Less 语法本身，而在于开发者试图用嵌套“模拟 HTML 结构”，却忘了 CSS 应该基于功能或状态组织，不是 DOM 深度镜像。删掉两层缩进，改用 @at-root 提级或提前定义 $block: ".card" 显式拼接，比硬撑四层缩进更省事也更可靠。
