less嵌套核心是提升可读性而非性能，安全深度≤3层；超层易致权重爆炸、覆盖失效；须用&绑定伪类/媒体查询；bem命名比缩进嵌套更可控。
Less 嵌套不是“让 CSS 更快”，而是让人一眼看懂样式归属关系——但写错一层，编译出的选择器就可能权重爆炸、覆盖失效、调试抓狂。
嵌套层级超过三层就会失控
比如 .page .layout .content .section .item 这种 5 级选择器，权重是 0-5-0，比单类名 .item 高整整五级。后续想用 .item.is-active 覆盖它？基本不可能，除非加 !important 或再叠更高权重。
- 真正安全的嵌套深度是 ≤3 层：如
.card { &__header { &::before {} } } - 一旦出现
.a { .b { .c { .d {} } } }，立刻拆：把.d提成独立类，或改用&__d - 检查编译输出，如果看到连续 4 个以上空格分隔的类名，说明该重构了
伪类/伪元素必须用 & 显式绑定
.link:hover 和 .link :hover 在浏览器里效果不同；在 Less 里漏掉 & 或空格，直接报 Unknown word 错误。
- 正确写法只有两种：
&:hover（无空格）、&::before（双冒号） - 错误写法：
:hover（缺&）、& :hover（多空格）、&: hover（冒号后空格） - 拼接类名用
&.is-active，后代选择器才用& .child
媒体查询内嵌套必须加 & 否则失效
@media (max-width: 768px) { .nav { a {} } } 编译后是全局 a 标签样式，不是 .nav a —— 因为 Less 不知道你要绑定父级。
- 必须写成：
@media (max-width: 768px) { .nav { & a {} } } - 更推荐收口写法：
@media (max-width: 768px) { .nav { &__link { color: red; } } } - 避免在媒体查询里再套两层嵌套，否则编译出的
@media ... .nav li a极难定位和覆盖
BEM 命名比缩进嵌套更可控
缩进嵌套是视觉模拟 DOM 深度，但编译后仍是高权重后代选择器；&__body 则生成扁平类名，权重可控、语义清晰、复用自由。
- ✅ 推荐：
.card { &__header {}, &__body {}, &:hover {} }→ 输出.card__header、.card:hover - ❌ 慎用：
.container { .row { .col-6 {} } }→ 输出.container .row .col-6，破坏布局类解耦原则 - 子选择器必须显式写
& > .item，不能靠缩进——Less 默认空格就是后代关系
最常被忽略的一点：嵌套不改变运行时性能，只影响人脑解析成本。每次敲 { 前，先问自己——这个结构是给人看的，还是给机器执行的？前者要可追溯，后者要够轻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
