less嵌套本质是字符串拼接而非逻辑封装，生成多级后代选择器导致权重升高、匹配变慢、覆盖困难；&符号误用会意外增加权重；三层以上嵌套暴露语义混乱与维护风险；布局类和第三方组件禁用嵌套以保障复用性与可覆盖性。
嵌套直接拼接出多级后代选择器
Less嵌套不是逻辑封装，是字符串拼接。写 .card { .header { .title { color: red; } } }，编译结果就是 .card .header .title，一个三类名的后代选择器，权重为 0-3-0。浏览器匹配时必须从 .title 往上逐层验证父级是否存在，DOM 越深越慢；覆盖时你得写 .card .header .title.is-highlight 或加 !important，否则单类名 .title（权重 0-1-0）根本压不住。
& 符号用错等于主动加权
& 是父选择器的完整副本，但它的行为完全取决于空格和符号组合：
-
&__title→ 编译为.card__title（权重0-1-0，安全） -
.title（无&）→ 编译为.card .title（权重0-2-0，已翻倍） -
& .title（带空格）→ 还是.card .title，&白写了 -
&:hover（无空格）→.card:hover（权重0-1-1），比.card .title:hover（0-2-1）低一级
三层以上嵌套基本等于放弃控制权
超过三层（如 .modal { .overlay { .content { ... } } }）说明语义没切开，编译后是 .modal .overlay .content（0-3-0），DOM 稍有变动就静默失效。更危险的是媒体查询里塞全量嵌套：@media (max-width: 768px) { .nav { .item { display: block; } } } → 输出带前缀的冗余规则，体积和权重双爆炸。
检查编译结果，如果看到 .page .layout .main .content .title 这种 5 级链，不是“结构清晰”，是样式系统已经失控。
布局类和第三方组件禁用嵌套
.container、.row 这类布局类本该复用，嵌套等于锁死上下文。同样，把 .react-datepicker 套进 .form { ... } 里，会生成 .form .react-datepicker，反而让原生类更难覆盖。
真正难的不是记住 & 怎么写，而是每次敲 { 前得判断：这个结构是给人读的，还是给浏览器匹配的？后者越扁平越稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
