&__elem能降权因其编译为单类名（如.card__header，权重0-1-0），而.child嵌套生成后代选择器（如.card .header，权重0-2-0）；空格决定拼接方式，三层以上必须扁平化拆解。
深层嵌套直接导致编译出的选择器权重飙升，比如 .card .header .title 权重是 0-3-0，单类名覆盖基本失效——这不是写法“高级”，是给后续维护埋雷。
为什么 &__elem 能降权，而 .child 嵌套不能
& 是父选择器的完整副本，用对了就生成扁平类名；写错就白嵌套一层。关键在空格和符号组合：
-
&__header→ 编译为.card__header（权重 0-1-0） -
.header（无&）→ 编译为.card .header（权重 0-2-0） -
& .title（带空格）→ 还是.card .title，&没起作用 -
&:hover（无空格）→ 正确生成.card:hover；:hover单独写会变成全局:hover，报Unknown word错误
三层以上嵌套必须拆，不是优化而是止损
超过三层（如 .modal { .overlay { .content { ... } } }）说明语义没切开，编译后是 .modal .overlay .content，权重 0-3-0，且 DOM 稍有变动就静默失效：
- 立刻改用
&__overlay、&__content，输出单类名 - 检查编译结果：如果看到
.page .layout .main .content .title这种 5 级链，就是硬伤 - 布局类（如
.container、.row）禁用任何嵌套——它们本该复用，嵌套等于锁死上下文
媒体查询和跨组件复用别往嵌套里塞
把 @media 塞进深层嵌套，Less 会忠实地复制所有前缀，体积和权重双爆炸：
- 错误：
.card { @media (max-width: 768px) { .title { ... } } }→ 输出@media {...} .card .title {...} - 正确：
.card { @at-root @media (max-width: 768px) { &__title { ... } } }→ 输出@media {...} .card__title {...} - 第三方组件（如
.react-datepicker）别套进.form { ... }里，否则生成.form .react-datepicker，反而更难用原生类覆盖
真正难的不是写对 &，而是每次敲 { 前得判断：这个结构是给人读的，还是给浏览器匹配的？后者越扁平越稳，前者才需要缩进表达关联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
