Less嵌套过深导致CSS权重失控，因每层嵌套编译为后代选择器（如.card .header .title权重0-3-0），浏览器需从右向左逐级回溯匹配，DOM越深越慢；单类名覆盖需!important或更重选择器，维护困难。
Less嵌套过深为什么会让CSS权重失控
嵌套不是视觉分组，是选择器字符串拼接。写 .card { .header { .title { color: red; } } }，编译后就是 .card .header .title，权重直接变成 0-3-0。浏览器匹配它要从 .title 往上逐层找父级，DOM 深了就慢；后续想用单个类如 .title-highlight 覆盖它，基本得加 !important 或写成 .card .header .title-highlight——这不是覆盖，是妥协。
什么时候必须用 &，什么时候绝对不能用
& 是父选择器的完整副本，不是“当前作用域”。它决定编译后是拼接类名（低权），还是后代选择器（高权）。
- 必须用：
.btn { &__icon { display: inline-block; } }→ 编译为.btn__icon（BEM，权重 0-1-0） - 必须用：
a { &:hover { color: blue; } }→ 编译为a:hover（伪类，权重 0-1-1） - 绝对不能用：
.modal { & .close { opacity: 0.5; } }→ 等价于.modal .close，多此一举还拉高权重 - 容易错：
.list { & li { margin: 4px; } }→ 实际仍是.list li，和不加&完全一样
用 BEM 替代深层嵌套的真实写法
BEM 不是命名习惯，是把 DOM 层级语义“平铺”到类名里。它不禁止嵌套，但拒绝用缩进模拟结构。
- 错：
.card { .body { .title { font-size: 18px; } } }→ 编译出.card .body .title - 对：
.card__title { font-size: 18px; }→ 权重恒为 0-1-0，可被.card__title--large干净升级 - 修饰符也走 BEM：
.btn { &--primary { background: #007bff; } &--primary:hover { background: #0056b3; } }→ 编译为.btn--primary和.btn--primary:hover，都是 0-2-1 权重 - 伪元素不增加层级计数：
.btn { &:hover { &::before { content: "★"; } } }→ 编译为.btn:hover::before（仍属 0-2-1）
媒体查询和跨区域复用怎么跳出嵌套陷阱
媒体查询塞进深层嵌套里，会复制所有前缀，体积和权重双爆炸；跨组件复用样式硬套嵌套，反而锁死上下文。
立即学习“前端免费学习笔记（深入）”；
- 用
@at-root跳出：.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media (min-width: 768px) { .btn--large { ... } }，不带父级前缀 - 抽公共样式用 Mixin，不在嵌套里反复调：
.card { .text-style(); }比.card { .title { .text-style(); } .subtitle { .text-style(); } }更干净 - 工具类（如
.text-center）别嵌套定义，它们本就不该依赖上下文 - 第三方组件（如
.react-datepicker）嵌套后极难覆盖，优先用原生类组合或属性选择器，比如[data-testid="date-picker"] .dp-button
.a .b .c .d 看着像局部，实际是全局高压线。每次敲下 { 前，先问一句：这个结构，真需要靠 CSS 后代关系来约束吗？ 
