嵌套超过3层会让css选择器变“重”又难改，因less仅将缩进转为后代选择器，导致浏览器从右往左逐级回溯匹配耗时激增，权重飙升至0-4-1，覆盖需!important或更长选择器；@at-root用于切断嵌套链而非补救深层结构，应优先用bem扁平命名降权。
为什么嵌套超过3层会让CSS选择器变“重”又难改
Less不压缩、不降权，它只忠实地把缩进转成空格分隔的后代选择器。.page .layout .main .content p这种4层结构，浏览器匹配时得从p开始，逐级向上查父元素是否为.content、再查是否在.main里……DOM越深，回溯越慢。更麻烦的是权重直接飙到0-4-1，你写个.content-highlight根本盖不住它，只能加!important或硬凑更长的选择器——这不是覆盖，是投降。
@at-root不是“跳出缩进”，而是“跳出选择器拼接上下文”
@at-root真正的价值，是切断当前嵌套链对后续规则的前缀继承。它不改变语义，只重置编译时的选择器生成逻辑。
- 错：
.btn { @at-root { &--large { font-size: 18px; } } }→ 编译失败，@at-root不能单独包裹带&的块 - 对：
.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; }，完全脱离.modal .overlay作用域
关键点：@at-root后面必须紧跟一个**完整的选择器或规则集**，不能只包&片段；它解决的是“不该被嵌套却被动嵌套”的问题，不是用来给深层结构“打补丁”的。
三层以内还能救，四层起必须拆——别信“加@at-root就能续命”
看到.card { .body { .title { .highlight { ... } } } }，第一反应不该是加@at-root，而是删掉两层缩进。
- 用
&__title替代.body .title：直接写.card { &__title { color: red; } }→ 编译为.card__title，权重恒为0-1-0 - 伪类/伪元素不算层级：
.btn { &:hover { &::before { content: "★"; } } }看似三层，实际编译为.btn:hover::before（0-2-1），安全 - 媒体查询必须
@at-root：否则.card { @media {...} { .title { ... } } }会产出@media {...} { .card .title { ... } }，白费力气
工具上，npx lessc input.less | grep -E "\.[a-z]+(\s+\.[a-z]+){3,}"能扫出所有4+类名选择器；VS Code装Less IntelliSense，第4层缩进就标黄——这些不是提示“可以再忍一忍”，是在说“现在重构成本最低”。
真正容易被忽略的点：嵌套和BEM不是二选一，而是分工关系
很多人以为用了&__elem就等于放弃嵌套，其实不是。&是控制拼接的开关，嵌套是组织代码的容器。真正危险的是用缩进模拟DOM深度，而不是用嵌套写BEM。
比如这个结构：.product-card { .image { &__placeholder { opacity: 0.3; } } }，编译出.product-card .image__placeholder——还是2层后代，权重0-2-0，没解决问题。正确写法是.product-card__image-placeholder，哪怕它在文件里写在.product-card块内部，也该用&__image-placeholder生成扁平类名。嵌套只是让你少敲几遍.product-card，不是替你决定DOM该怎么映射到CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
