less嵌套导致css权重线性叠加，超3层即失控；应限制嵌套深度、优先bem命名、慎用&与extend()，并用@import(once/reference)管控引入。
Less编译后CSS权重过高，根本不是语法写错了，而是嵌套结构被直接翻译成后代选择器，每多一层就加一个类名或标签名，权重线性叠加。比如 .page .layout .main .content p 权重是 0-4-1，想用 .text-red（0-1-0）覆盖它，基本得加 !important 或写成 .page .layout .main .content p.text-red ——这不是维护，是硬刚。
嵌套超3层就会让选择器权重失控
Less 不做权重优化，只做字面展开。.card { .header { h1 { color: red; } } } 编译出来就是 .card .header h1，权重 0-2-1；再套一层，立刻变成 0-3-1。浏览器匹配成本上升，后续覆盖难度指数级增长。
- 检查编译后 CSS：在 DevTools 的 Styles 面板里看真实选择器，超过 3 级组合（如
.a .b .c .d）就要警觉 - 真正需要语义分组的地方才嵌套，比如
.modal { .modal-header {} .modal-body {} }；纯布局类（.container、.row）禁用深层嵌套 - 超过 3 层时，优先压平为 BEM 命名：
.card__header-title替代.card .header .title，权重恒为 0-1-0
& 符号拼接不当会意外拉高权重
& 是控制绑定关系的关键，漏写、错位或空格误用，都会生成非预期的高权重选择器。
-
.btn { &:hover { } }→ 正确，编译为.btn:hover（0-1-1） -
.btn {:hover}或.btn:hover（无空格）→ Less 解析为自定义标签选择器，报Unknown word -
.nav { li { a {} } }→ 编译为.nav li a（0-3-0），但若本意是.nav > li > a，必须显式写& > li > a - 媒体查询内必须加
&绑定父级：@media (max-width: 768px) { .nav { & a {} } }，否则a会变成全局样式
extend() 和 mixins 混用会隐式放大权重
:extend() 看似省代码，实则把目标选择器完整“复制”进当前上下文；mixins 则是静态插入样式块——两者都可能让同一段声明出现在多个高权重路径下。
-
.icon { &:extend(.visually-hidden all) }在.card { .icon {} }里调用，最终生成的是.card .icon, .visually-hidden，但.visually-hidden若本身带权重（如定义在.page .util下），就会连带拉高整个列表 - 跨文件
:extend()很容易失效：.btn:extend(.disabled)若.disabled在另一个未@import的文件里，Less 报Unknown pseudo-class or pseudo-element，但不会中断编译，结果是.btn单独输出，失去合并效果 - 高频原子样式（如
.sr-only、.text-truncate）更适合抽成独立 class +@import (once)，而非每次.truncate() { ... }调用
真正可控的降权手段是主动放弃嵌套思维
嵌套是给人读的，不是给浏览器优化的。权重问题从来不在编译器，而在你是否把“代码缩进整齐”和“生成的选择器合理”混为一谈。
- 用
@import (reference)引入 mixin 文件，避免无意义 CSS 输出；用@import (once)控制公共基础类只引入一次，防止同一样式被多个父级重复继承 - 禁用通配导入：
@import "components/*.less"在标准 Less 中不支持，Webpack 等工具会静默全量加载，彻底废掉按需控制 - 变量重定义必须警惕：嵌套块里写
@primary-color: #f00;是局部作用域，外部看不到，但会干扰同名变量的全局替换逻辑 - 最常被忽略的一点：你看到的“高权重”，90% 来自开发期未清理的中间产物——比如用
lessc app.less --source-map调试时没关 map，或构建流程里忘了跑postcss-combine-media-query合并重复断点，导致冗余规则堆叠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
