Less中禁用通配符*和超3层嵌套，因其导致渲染性能骤降、样式覆盖困难；应改用BEM命名、@at-root抽离、文件拆分及权重检测工具管控。
直接说结论：Less里用通配符 * 和超过3层的嵌套，等于主动给浏览器渲染加锁，还让后续样式覆盖变成“拆弹任务”。这两类写法必须禁用，不是优化建议，是底线。
为什么 * 在 Less 中比在原生 CSS 里更危险
Less 编译不阻止 *，但会把它原样输出——问题在于，它常被塞进嵌套块里，放大危害。比如写 .modal { * { margin: 0; } }，编译后是 .modal * { margin: 0; }，权重虽低，但匹配范围爆炸，尤其在含大量动态插入节点的 SPA 中，重排（reflow）开销直线上升。
- 通配符无法被 CSS 压缩工具（如 cssnano）安全移除，
postcss-discard-unused对它完全失效 - 在 Vue/React 的 scoped 模式下，
* { ... }会被自动加上属性选择器（如*[data-v-xxx]），反而生成更难调试的长选择器 - 真正需要“重置”的地方，用
all: unset或显式重置列表（margin/padding/border）更可控，也更容易被 PurgeCSS 扫描剔除
嵌套超过 3 层时，& 不是救星，而是陷阱
很多人以为加 & 就能“扁平化”，结果写出 .card { .header { &__title { ... } } }——这编译出来仍是 .card .header .card__title，三重后代选择器+一个拼接类，权重 0-3-0，且语义混乱。
- 嵌套层级 ≠ BEM 层级：
&__title只拼接父名，不消除上层嵌套产生的空格分隔 - 检查编译后 CSS 最快的方法：搜索
{前的空格数，4个及以上空格基本对应 3 层以上嵌套 - 真要处理深层 DOM（比如
.table .row .cell .actions），应提取独立类名.table-cell-actions，而不是靠嵌套推导
替代方案：用 @at-root 和文件拆分守住性能边界
当视觉结构看起来“必须嵌套”时，优先用 @at-root 跳出上下文，再用 BEM 或语义类名收口。比如模态框的关闭按钮，别写 .modal { .header { .close { ... } } }，而应：
立即学习“前端免费学习笔记（深入）”；
.modal {
&__header { ... }
@at-root .modal__close {
position: absolute;
top: 12px;
right: 12px;
}
}-
@at-root让.modal__close独立输出，不带任何父级前缀，权重恒为 0-1-0 - 把
.modal__close单独抽成modal/close.less文件，配合@import按职责加载，比堆嵌套更利于 tree-shaking - 构建时加一道检查：用
npx postcss-selector-max-specificity --max "0,2,0" dist/main.css拦截所有权重 ≥ 0-2-0 的选择器
最易被忽略的点：嵌套深度控制不是靠开发者自觉，而是要进 CI 流程卡死。本地开发时漏掉一层嵌套，上线后可能让整页滚动帧率掉 15%——这不是夸张，是 Chrome DevTools 的 Rendering 面板里能直接复现的数字。
