Less嵌套会直接提升CSS选择器权重，因编译后生成更长选择器（如.card .title权重0,1,1），易导致覆盖困难；应优先用BEM扁平命名、限制嵌套至1层，并通过检查编译CSS和DevTools specificity主动防控。
Less 中嵌套规则会直接提升 CSS 选择器权重
Less 的嵌套写法（比如 & 嵌套、多层选择器缩进）不是语法糖，它会原样拼接成更长的选择器。浏览器计算权重时，每多一个类名、ID 或标签，权重就叠加——.header .nav .item a:hover 比 .nav-item.is-active 高得多，且无法被后者覆盖，除非加 !important 或更高权重选择器。
哪些嵌套最容易导致权重失控
以下写法在 Less 中很常见，但编译后极易埋雷：
-
.card { .title { color: red; } }→ 编译为.card .title（权重 0,1,1），而平级写.card-title只有 0,1,0 -
ul { li { a { &:hover { ... } } }→ 编译为ul li a:hover（0,0,3），远高于.nav-link:hover（0,1,1） - 滥用
&连接父选择器：.btn { &--primary { ... } &.is-loading { ... } }看似安全，但若外层已有嵌套（如.modal .btn），&--primary就变成.modal .btn--primary，权重翻倍
用 BEM + 扁平结构替代嵌套
真正可控的方案不是“少嵌套”，而是**不依赖嵌套来表达语义**。BEM 命名天然规避层级膨胀：
- 把
.dialog { .header { .title { ... } } }改成.dialog__title—— 单类名，权重稳定 - 组件内状态用修饰符：
.button.is-disabled而非.button { &.is-disabled { ... } }，避免生成.button .button.is-disabled这种错误拼接（后者是常见误写） - 必要嵌套仅用于作用域隔离，且限制在 1 层：比如
.carousel { &__track { ... } &__item { ... } }，不继续嵌&__item img
检查编译结果比调试 CSS 更有效
Less 编译器不会警告权重问题，必须主动验证输出：
立即学习“前端免费学习笔记（深入）”；
- 打开编译后的 CSS 文件，搜索高权重模式：
\. [a-z]+ \. [a-z]+ \. [a-z]+（正则匹配连续三个类名） - 用浏览器 DevTools 的 Computed 面板点开某个样式，看 “Specificity” 数值，超过
0,1,2就该警惕 - 配置
less-plugin-clean-css并开启compatibility: 'ie8'选项——它会强制扁平化部分嵌套，可暴露冗余结构
权重问题从来不是“写完再修”，而是在每次嵌套前问一句：这个层级，是否真由 DOM 结构决定？还是仅仅为了写起来顺手？
