Less嵌套过深会导致浏览器匹配变慢、权重失控、调试困难；因浏览器从右往左逐级回溯，DOM越深耗时越长，低端设备中可能慢3–5倍，Recalculate Style时间明显上涨。
Less 层级嵌套过深不会让 CSS “变慢”，而是让浏览器匹配选择器时必须做更多回溯计算——尤其是 DOM 节点多、结构深、频繁重绘的场景下，.page .main .content .card .title 这种 5 层选择器在低端设备上 style recalc 时间可能比 .card__title 慢 4 倍以上。
为什么浏览器匹配深层嵌套选择器会变慢
浏览器解析 CSS 时严格从右往左执行。写 .card .header .title，引擎先找所有 .title 元素，再逐个向上检查其父级是否为 .header，再查该 .header 是否在 .card 内。每多一层，回溯路径就多一跳。
- DOM 节点越多，
.title匹配结果越庞大，回溯开销指数增长 - 伪类如
:hover放在最右边（如.card .title:hover）会触发全量扫描，比.title--hovered多出 2–3 倍成本 - DevTools Performance 面板中 “Recalculate Style” 时间突然飙升，大概率就是这类选择器在拖后腿
- 用
grep -r "\.[a-z]\+ \.[a-z]" src/可快速扫出含空格的选择器，它们全是潜在性能热点
Less 中 & 符号怎么用才不拉高权重
& 不是作用域占位符，它是父选择器的完整副本。用错等于主动加权；用对才能生成扁平类名。
- ✅ 安全：
.btn { &__icon { display: inline-block; } }→ 编译为.btn__icon（权重 0-1-0） - ✅ 安全：
a { &:hover { color: blue; } }→a:hover（0-1-1），伪类不增加层级计数 - ❌ 危险：
.modal { & .close { opacity: 0.5; } }→.modal .close，多一层无意义后代关系，权重+1 - ❌ 危险：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&完全没起作用
@at-root 不是用来“救”深层嵌套的
@at-root 的作用是切断当前嵌套链对后续规则的前缀继承，不是给 4 层缩进打补丁。它解决的是“不该被嵌套却被动嵌套”的问题。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确用法：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media (min-width: 768px) { .btn--large { ... } } - ✅ 正确用法：
.modal { .overlay { @at-root .tooltip { top: -10px; } } }→ 输出.tooltip { top: -10px; }，完全脱离父级上下文 - ❌ 错误期待：看到
.card { .body { .title { .highlight { ... } } } }就想加@at-root来“缓解”——第一反应应是删掉两层缩进，改用.card { &__title { ... } } - ⚠️ 注意：
@at-root后必须紧跟完整选择器或规则集，不能只包&片段，否则编译失败
BEM 类名不是命名格式，是结构平移约束
BEM 把 DOM 层级关系“翻译”成类名语义，而不是靠缩进模拟父子关系。它不禁止嵌套，但拒绝用视觉缩进表达结构依赖。
- 禁止：
.card__header__title—— Element 不能嵌套 Element，违反 BEM 原则，暴露 DOM 层级而非语义职责 - 禁止：
.card .body .title—— 空格选择器必须全部替换为.card__title - 允许：
.card--compact和.card__title--large—— 修饰符独立生效，不依赖父类存在 - 子组件需样式隔离？用新块名：
.modal__close-button，而不是.modal .button
真正容易被忽略的点：BEM 和嵌套不是替代关系，而是分工关系——嵌套只用于媒体查询、伪类、主题切换这三类有限场景，且深度必须 ≤2；其余所有结构表达，都该由类名承担。一旦发现 .a .b .c .d，别急着加 @at-root，先确认 HTML 是否漏写了基础块名（比如缺 card 导致 .card__title 根本不匹配），再检查是否误把布局逻辑塞进了组件样式里。
