Less多层嵌套导致权重飙升，本质是生成冗余后代选择器（如.card .header .title，0-3-0），而非优先级过高；应改用BEM命名（.card__title，0-1-0）或&精准拼接类名/伪类，配合@at-root抽离响应式规则，避免深层嵌套。
Less 多层嵌套直接导致编译后选择器权重飙升，不是“优先级太高”，而是你生成了本不该存在的长链后代选择器——比如 .card .header .title（权重 0-3-0），而它本可以只是 .card__title（0-1-0）。解决核心不是压权重，是砍掉冗余层级。
为什么 & 用错会把权重拉得更高
& 是父选择器的完整副本，不是“当前作用域占位符”。它不帮你降权，只决定拼接方式。用错等于主动加权。
- 错：
.modal { & .close { opacity: 0.5; } }→ 编译为.modal .close，多一层无意义后代关系，权重+1 - 错：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&完全没起作用 - 对：
.btn { &__icon { display: inline-block; } }→.btn__icon，新类名，权重恒为 0-1-0 - 对：
a { &:hover { color: blue; } }→a:hover，伪类不增加层级计数，权重 0-1-1
哪些嵌套写法看似省事，实则让覆盖变成噩梦
一旦出现以下模式，后续改样式基本只能靠 !important 或更长的选择器硬顶，维护成本直线上升。
-
.nav { .item { a { &:hover { text-decoration: underline; } } } }→ 编译为.nav .item a:hover（0-3-1），比a:hover（0-1-1）高两级 -
.modal { &.is-open { .overlay { opacity: 0.8; } } }→.modal.is-open .overlay（0-3-0），四层语义但三段选择器 - 在媒体查询里塞满嵌套：
@media (max-width: 768px) { .card { .body { p { font-size: 14px; } } } }→ 每条规则都带全前缀，体积和权重双爆炸
用 @at-root 跳出嵌套，而不是在坑里挣扎
@at-root 是唯一能让你从嵌套上下文里“物理脱钩”的语法。它不改变逻辑归属，只控制输出位置——该平级就平级，不带父前缀。
立即学习“前端免费学习笔记（深入）”；
- 想定义一个同级修饰符：
.card { @at-root .card--compact { padding: 4px; } }→ 输出.card--compact，不是.card .card--compact - 响应式规则必须抽离：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media (min-width: 768px) { .btn--large { ... } }，干净、可覆盖、无冗余 - 避免
@at-root套@at-root：嵌套两层@at-root不会报错，但会让意图模糊，调试时难定位来源
BEM 不是命名习惯，是结构平移工具
BEM 把 DOM 层级“翻译”成类名语义，而不是靠缩进模拟父子关系。它不禁止嵌套，但拒绝用嵌套表达本该扁平的结构。
- 错：
.card { .body { .title { color: red; } } }→.card .body .title，权重失控 - 对：
.card__title { color: red; }→ 权重 0-1-0，后续加.card__title--large也仍是 0-2-0 - 伪元素不增加层级：
.btn { &:hover { &::before { content: "★"; } } }→.btn:hover::before（0-2-1），安全 - 共用样式必须抽 Mixin，且不在嵌套内反复调：
.card { .text-style(); }比.card { .title { .text-style(); } .subtitle { .text-style(); } }更轻量
真正容易被忽略的是：浏览器匹配 .a .b .c .d 这种选择器时，是从右往左逐级回溯的，DOM 越深，耗时越非线性增长——这不是“可能变慢”，是在低端 WebView 里实测慢 3–5 倍。别等 Recalculate Style 时间暴涨才想起查嵌套层数。
