css选择器层级超4层会触发浏览器深度回溯导致掉帧，因从右向左匹配需多次路径验证；bem中用&正确拼接可控制权重，@at-root仅用于语义提级，须在ci阶段用工具拦截深层嵌套。
Less嵌套过深不会让编译变慢，但会让浏览器匹配CSS时卡顿——根本原因是生成的选择器层级超过4层（如 .page .main .nav .item），触发浏览器从右往左的深度回溯，实测在低端Android设备上滚动列表就会掉帧。
为什么4层就是硬性临界点
浏览器不按DOM结构“往下找”，而是先抓所有 .item 元素，再逐个向上确认其父级是否为 .nav、再查 .nav 是否在 .main 内……每多一层，候选元素就要多一次完整路径验证。DOM节点超500个时，Recalculate Style 阶段很容易突破20ms，直接导致掉帧。
- 常见错误现象：
element.classList.add("is-active")失效，不是JS错了，是现有规则权重太高（比如.layout .dashboard .card .item.active）压住了新类 - DevTools “Computed” 面板里生效样式被几十条灰色规则盖住，不是覆盖逻辑错，是选择器太长、根本没匹配上
- 改一个状态类，结果整条4层选择器重匹配——性能瓶颈往往不出现在“写了什么”，而出现在“改了什么”
用 & 写BEM，而不是用缩进模拟DOM
& 不是作用域占位符，它是父选择器的精确拼接开关。用错等于主动加权；用对才能产出单类名。
- ✅ 安全写法：
.card { &__title { font-size: 18px; } }→ 编译为.card__title（权重0-1-0） - ✅ 安全写法：
.btn { &:hover { color: blue; } }→ 编译为.btn:hover（权重0-1-1，伪类不增层级） - ❌ 危险写法：
.modal { & .close { opacity: 0.5; } }→ 等价于.modal .close，多一层无意义后代关系，权重+1 - ❌ 危险写法：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&完全没起作用
用 @at-root 提级，而不是用它“救”烂结构
@at-root 不是逃逸键，是语义提级开关：只用于“逻辑上该平级，却被嵌套裹挟”的场景。它不解决深层嵌套本身，只防冗余拼接。
- ✅ 正确提级工具类：
.modal { @at-root .u-text-center { text-align: center; } }→ 输出.u-text-center，零回溯 - ✅ 可控提级媒体查询：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media { .btn--large { } } - ❌ 错误期待：
.card { .body { .title { .highlight { ... } } } }想靠@at-root缓解？第一反应应是删掉两层，改用.card { &__title { &--highlight { ... } } } - ⚠️ 注意：
@media块内禁用&嵌套。例如@media (min-width: 768px) { .card { &__body { } } }，若外层还有.layout .dashboard，&会展开全部路径，生成6层选择器
构建阶段就拦截，别等上线后看卡顿
性能问题必须卡在CI里，不能靠人眼扫代码。深层嵌套一旦漏过，后续调试成本指数级上升。
- 命令行扫描：
npx lessc input.less | grep -E "\.[a-z]+(\s+\.[a-z]+){3,}"找出所有4+类名选择器 - VS Code装Less IntelliSense，第4层缩进自动标黄——这不是提示“还能忍”，是重构成本最低的信号
- Webpack/Vite中接入
postcss-selector-max-specificity，设阈值为0,2,0，超限直接构建失败 - CI加粗筛：
grep -r "\.[a-z]\+.*{" src/styles/ | grep -E "{.{12,}"（12+空格≈4层缩进）
真正容易被忽略的是：BEM类名必须显式出现在HTML里，card__title 缺了 card 就完全不匹配；button--loading 必须能独立生效，否则 classList.add() 会静默失败——这些不是命名偏好，是浏览器匹配引擎的硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
