嵌套超过3层必须压平，否则生成冗长选择器、权重升高且难以覆盖；应采用BEM命名配合&控制作用域，避免嵌套+extend混用、动态拼接和重复导入。
嵌套超过3层就该立刻压平
Less每深一层嵌套，编译器就机械复制一次父选择器前缀，不是“写得紧凑”，而是生成更长、更重的选择器。比如 .card { .header { .title { color: @text-color; } } } 输出的是 .card .header .title，权重 0-3-0；到5层时变成 .page .layout .main .card .title，不仅体积翻倍，还基本无法用单类名覆盖。
真正有效的做法是主动压平结构：
- 把
.card { .header { .title { } } }改成.card__header-title，配合 BEM 命名规范 - 用
&控制作用域：写成.card { &__header { &__title { } } }，编译后是.card__header__title，而非嵌套选择器 - 检查编译后 CSS，如果看到大量
.a .b .c .d这类长链，说明嵌套没压平，或&用错了位置
避免嵌套 + extend 混用导致选择器爆炸
:extend() 在嵌套块里调用，Less 会把被继承的选择器完整复制进当前上下文，而不是合并。例如 .modal { .overlay { .content { &:extend(.visually-hidden all); } } } 不会生成 .visually-hidden, .modal .overlay .content，而是直接展开为 .modal .overlay .content { /* 所有 .visually-hidden 的声明 */ }。
多个组件各自这么写，就会产出多份一模一样的样式块。
立即学习“前端免费学习笔记（深入）”；
- 只在顶层（非嵌套）作用域中使用
:extend()，比如.btn-icon:extend(.icon all) {} - 跨文件使用
:extend()前，确保目标选择器已通过@import (once)正确引入，否则 Less 静默忽略，实际变成全量复制 - 用 Chrome DevTools 的 Coverage 面板查冗余 CSS，若发现
.page .section .card .header .title和.layout .main .card .header .title内容几乎一致，基本就是这个坑
递归 mixin 和动态选择器是内存与体积双杀
无终止条件的递归 mixin（如 .gen(@n) when (@n > 0) { .gen((@n - 1)); }）或循环中拼接选择器（如 @selector: ~".item-@{i}"; @{selector} { }），会让 AST 节点数呈指数级增长。Less 3.9–3.10.x 在 @n > 20 时大概率触发 JavaScript heap out of memory。
- 改用尾调用形式：
.gen(@n) { .loop(@i) when (@i > 0) { .loop((@i - 1)); } .loop(@n); } - 生成固定范围类（如
.col-1到.col-12），手写展开最稳，零风险 - 禁用
~".class-@{i}"动态拼接——它每轮都新建完整 AST 分支，不共享结构 - 升级到
less@^4.2.0，修复了旧版递归解析缺陷
用 @import (reference) 和 (once) 控制导入膨胀
同一份基础样式（如 .sr-only、.clearfix）被 5 个文件各自 @import 又各自 :extend()，结果就是 5 套重复规则。这不是压缩能解决的，是编译阶段就塞进了冗余语义。
- 公共基础类统一放
base/_extends.less，所有地方用@import (once) "base/_extends.less" - Mixin 定义文件（如
mixins/_utils.less）用@import (reference)，只提供逻辑，不输出 CSS - 绝对不要写
@import "components/*.less"—— 标准 Less 不支持通配符，Webpack 等工具会静默加载全部，彻底废掉按需控制 - 路径必须完全一致：
./_extends≠../base/_extends，否则(once)失效
嵌套层级本身不危险，危险的是没人去检查编译后的 CSS 是否出现长链选择器或重复块。最容易被忽略的是：你以为用了 & 就安全了，但 .list { & > li { & > a { } } } 实际仍是 3 层嵌套+2 次拼接，AST 节点数翻倍。真要压平，就得动刀改类名，而不是调参数。
