Less嵌套本身不减少选择器数量，关键在于用&、@media和BEM协同控制输出；应避免深层嵌套导致权重过高、体积膨胀，推荐BEM+嵌套实现单类名、低权重、易维护的CSS。
Less 的嵌套语法本身不减少选择器数量，它只是把重复的父选择器「写一遍、编译多次」——真正减少重复的关键，在于你如何用 &、@media 和 BEM 配合控制输出结果。
嵌套里怎么避免生成冗余选择器
很多人以为缩进越深，CSS 越“精准”，结果编译出 .page .layout .main .content .title 这种 0-4-0 权重的选择器，既难覆盖又难调试。嵌套不是层级压缩工具，而是选择器构造前置化的过程。
-
&必须显式出现：写&__header才生成.card__header；写成.card__header（漏&）就变成全局类，脱离上下文 - 空格是关键分水岭：
&.active→.btn.active；& .active→.btn .active（后代，权重+1） - 伪类必须带
&：&:hover正确，:hover单独写会变成全局:hover，可能意外匹配所有按钮 - 直接子元素用
>：> .item编译为.list > .item，比.list .item权重低、意图明确
什么时候嵌套反而增加重复代码
嵌套在媒体查询或跨区域复用场景下，极易导致 CSS 体积膨胀。Less 不会智能去重，它忠实按结构复制前缀。
-
@media (max-width: 768px) { & { .header {} } }→ 每个嵌套子规则都会裹一层断点，.card .header、.card .body各自输出一遍 - 第三方组件如
.react-datepicker嵌套后生成.form .react-datepicker，反而更难用原生类名覆盖 - 工具类（
.text-center、.m-2）不该塞进嵌套——它们本就不依赖上下文，硬套会导致.card .text-center这种无意义组合 - 循环 mixin 中误用
&：&:nth-child(@n)绑定的是调用位置的选择器，不是 mixin 定义处的父级，容易错位
BEM + 嵌套才是减少重复的正解
嵌套和 BEM 不是替代关系，而是分工：BEM 控制最终选择器权重与语义，嵌套只省掉重复敲 .card 的体力活。
立即学习“前端免费学习笔记（深入）”；
-
.card { &__header {} &__body {} &--primary {} }→ 编译为.card__header、.card__body、.card--primary，全是单类名，权重稳定（0-1-0） - 别在块内再套块：
.card { .user-card { ... } }→ 生成.card .user-card，权重翻倍，且违背 BEM “一个元素一个类”原则 - 修饰符状态必须拼接：
&--hover正确；.card--hover单独定义会丢失上下文，无法响应.card.card--hover的 HTML 结构 - 超过 3 层嵌套（如
.modal { .overlay { .content { ... } } }）说明职责没切开，该拆成.modal__overlay、.modal__content等平级类
嵌套不是语法糖，它是把选择器构造逻辑从 CSS 搬到 Less 的过程。一旦忘了编译后仍是普通 CSS，就容易在权重、体积、覆盖优先级上栽跟头——尤其当父选择器本身是 BEM 长名（如 .c-header-nav-list-item-link）时，5 层嵌套加伪类，可能生成几十行重复前缀的 CSS。
