less嵌套过深会导致css体积线性增长、选择器权重失控及ast节点雪崩；超3层应警惕，替代方案是bem命名与压平结构。
嵌套每深一层，CSS体积就可能翻倍
Less 嵌套不是“写得紧凑”，而是编译时机械复制父选择器前缀。比如 .card { .header { .title { color: @text-color; } } } 会生成 .card .header .title { color: #333; }；但若嵌套到 5 层，.a { .b { .c { .d { .e { color: red; } } } } } 就会输出带 5 级空格分隔的选择器，且每个父级都会在最终 CSS 中重复出现——这不是“多写了几个字”，是整段选择器字符串被反复拼接。
更关键的是：嵌套块内每新增一条声明，都得带上全部前置路径。一个 4 层嵌套里写 10 条样式，等于生成 10 个长度相近的长选择器，体积增长几乎是线性的，而非对数级。
嵌套 + extend 混用会让选择器爆炸式重复
当 :extend() 出现在嵌套块内部，Less 会把被继承的选择器完整复制进当前上下文。例如：
.modal { .header { .title { &:extend(.visually-hidden all); } } }
这不会生成 .modal .header .title, .visually-hidden，而是直接展开为：
.modal .header .title { ...所有 .visually-hidden 的声明... }
如果同一份 .visually-hidden 被 3 个不同嵌套块调用，就会产出 3 份完全相同的声明块，彼此无法合并。
- 检查编译后 CSS：看到
.page .section .card .header .title { ... }和.layout .main .card .header .title { ... }两段几乎一样的规则？那就是嵌套+extend叠加的典型症状 -
:extend()跨文件不可见，若目标选择器定义在未@import的文件里，Less 会静默忽略，但嵌套结构照常展开，导致“看似用了 extend，实则全量复制”
超过 3 层嵌套就该警惕权重与体积双失控
3 层嵌套（如 .card .header .title）权重是 0-3-0，尚可覆盖；到了 5 层，权重升至 0-5-0，基本只能靠 !important 或更高层嵌套来覆盖——而后者只会让问题恶化。体积上，每多一层，选择器字符串长度平均增加 15~25 字符，100 个类似结构就能多出 2~3KB 不可压缩的冗余文本。
真正危险的是“嵌套感知不到边界”：开发者以为 & 能省事，结果写出 .list { & > li { & > a { } } }，这实际等价于 3 层嵌套+2 次 & 拼接，AST 节点数翻了不止一倍。
- Chrome DevTools 的 Coverage 面板里，高亮出大量
.page .layout .content .section .item p类似路径？说明嵌套已失控，不是 CSS 写多了，是嵌套方式错了 - 用
lessc --verbose编译时观察输出行数，若某段嵌套贡献了 30% 以上行数，但只对应 2~3 个视觉组件，基本可以判定为过度嵌套 - 替代方案不是“少嵌套”，而是换表达方式：
.card__title比.card .header .title更轻、更可控、更易 Tree Shaking
递归 mixin + 深层嵌套 = AST 节点雪崩
Less 解析器构建的是抽象语法树（AST），不是字符串模板。深度嵌套本身就会创建大量 NestedRuleset 节点；若再混入无终止条件的递归 mixin（如 .gen(@n) when (@n > 0) { .gen((@n - 1)); }），每个递归调用都会新建一套嵌套上下文节点。20 层嵌套 + 10 次递归，AST 节点数轻松突破 10 万，V8 堆内存直接打满。
这种膨胀不体现在源码行数上，而是在编译瞬间——你改一行变量，热更新卡死、JavaScript heap out of memory 报错，但 lessc --version 仍能跑通。说明问题不在环境，而在 AST 构建阶段的失控。
- 临时注释掉所有
.mixin() { ... }定义，仅保留嵌套样式，再编译：若仍 OOM，就是嵌套层级或@import链的问题 - 动态拼接选择器（如
@selector: ~".item-@{i}"; @{selector} { ... }）配合循环，会为每个值新建完整节点分支，比静态嵌套更伤内存 - 最省力的破局点永远是：先砍掉所有未设
when (@n = 0)终止条件的递归，再压平嵌套，别指望调大 Node.js 内存能根治
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
