嵌套超过3层会导致CSS选择器权重失控、覆盖困难、调试成本陡增，是真实可测的维护陷阱；编译后权重飙升，单类名无法覆盖，只能硬凑高权选择器或用!important打补丁。
嵌套超过3层会让导出的CSS选择器权重失控、覆盖困难、调试成本陡增，不是风格问题，是真实可测的维护陷阱。
编译后选择器权重飙升，单类名根本盖不住
Less不降权、不压缩，它只把缩进原样转成空格分隔的后代选择器。.card { .header { .title { color: red; } } } 编译为 .card .header .title（权重 0-3-0），而你写个 .title-highlight（0-1-0）想覆盖它？浏览器直接忽略。后续只能硬凑 .card .header .title-highlight 或加 !important——这不是维护，是在打补丁。
- 三层以内（如
.btn { &--primary { &:hover { } } }）编译为.btn--primary:hover（0-2-1），安全可控 - 四层起（如
.modal { .overlay { .content { h1 { } } } }）必然产出 0-3-1+ 权重，且无法靠 BEM 自动降权 - VS Code 的 Less IntelliSense 插件会在第4层缩进处标黄，这是最轻量的实时拦截信号
& 符号用错等于主动加权，不是省事而是埋雷
& 是父选择器的完整副本，不是作用域占位符。它决定编译结果是拼接类名（低权），还是生成后代关系（高权）。
- ✅ 安全：
.btn { &__icon { display: inline-block; } }→.btn__icon（0-1-0） - ✅ 安全：
a { &:hover { color: blue; } }→a:hover（0-1-1），伪类不增加层级计数 - ❌ 危险：
.modal { & .close { opacity: 0.5; } }→.modal .close，多一层无意义后代关系，权重+1 - ❌ 危险：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&完全没起作用
@at-root 不是用来“救”深层嵌套的
@at-root 的作用是切断当前嵌套链对后续规则的前缀继承，不是给4层缩进打补丁。它解决的是“不该被嵌套却被动嵌套”的问题。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media (min-width: 768px) { .btn--large { } } - ✅ 正确：
.modal { .overlay { @at-root .tooltip { top: -10px; } } }→ 输出.tooltip { top: -10px; } - ❌ 错误期待：
.card { .body { .title { .highlight { } } } }想靠@at-root缓解——第一反应应是删掉两层缩进，改用.card { &__title { } } - ⚠️ 注意：
@at-root后面必须紧跟一个**完整的选择器或规则集**，不能只包&片段
BEM 不是命名规范，是结构映射工具
把 DOM 深度转成类名语义，而不是靠缩进模拟父子关系。真正容易被忽略的是：嵌套和 BEM 不是二选一，而是分工关系。
- 错：
.card { .body { .title { font-size: 18px; } } }→ 编译出.card .body .title（0-3-0） - 对：
.card__title { font-size: 18px; }→ 权重恒为 0-1-0，可被.card__title--large干净升级 - 修饰符也走 BEM：
.btn { &--primary { background: #007bff; } &--primary:hover { background: #0056b3; } }→ 全部输出为 0-2-1 权重 - 伪元素不增加层级：
.btn { &:hover { &::before { content: "★"; } } }→.btn:hover::before（仍属 0-2-1）
真正难维护的从来不是“写不出来”，而是“改不动又不敢删”。当 grep -r "\.[a-z]\+ \.[a-z]" src/ 扫出一堆 .page .layout .main .content p 这类长链时，问题早已不在语法，而在结构决策本身。
