深层嵌套不报错但导致选择器权重飙升、匹配路径变长，引发覆盖失效；应通过编译后css检查后代链、合理使用&拼接类名、用@at-root抽离响应式/伪类、践行bem命名并确保html类名一致。
深层嵌套本身不报错，但编译后生成的选择器权重飙升、匹配路径变长，导致样式覆盖失效或行为不可预测——这不是浏览器 bug，是你写的 .card .header .title 已经是 0-3-0 权重，而想覆盖它的 .title-highlight 只有 0-1-0，根本赢不了。
检查编译输出，别靠缩进猜选择器
VS Code 按住 Ctrl 点击编译后的 CSS 文件，直接看真实生成结果。重点搜以下模式：
-
.page .layout .content .section .item（5 层以上后代链） -
.nav .item a:hover（伪类混在深层里，权重 0-3-1） -
@media (max-width: 768px) { .a .b .c p { ... } }（媒体查询内嵌套，前缀重复）
只要看到这类输出，说明嵌套已失控，不是“写得细”，是选择器结构被污染了。
用 & 拼接类名，而不是靠空格拼后代
& 是上一层选择器的完整字符串副本，它不帮你降权，只决定怎么拼。空格有无，结果天差地别：
- 错：
.modal { & .close { opacity: 0.5; } }→ 编译为.modal .close（多一层无意义后代，权重+1） - 错：
.list { & li { margin: 4px; } }→ 实际仍是.list li（&完全没起作用） - 对：
.btn { &__icon { display: inline-block; } }→.btn__icon（新类名，权重恒为 0-1-0） - 对：
a { &:hover { color: blue; } }→a:hover（伪类不增加层级计数）
& 后**不能有空格**；要拼类名就写 &__xxx 或 &--modifier；要写后代才加空格。
响应式与伪类必须用 @at-root 抽离
在媒体查询或伪类组合里继续嵌套，等于把所有父级前缀复制一遍，体积和权重双爆炸：
- 错：
.card { @media (max-width: 768px) { .body { p { font-size: 14px; } } } }→ 编译出带全前缀的规则，难调试也难覆盖 - 对：
.card { @at-root @media (min-width: 768px) { &--compact { padding: 4px; } } }→ 输出平级@media块，无冗余前缀 - 对：
.form-group input { @at-root &:focus:invalid { border-color: red; } }→ 避免.form-group input:focus:invalid这种高权又语义模糊的写法
@at-root 不改变逻辑归属，只控制输出位置——该平级就平级，不带父前缀。它不是语法糖，是唯一能让你从嵌套上下文里“物理脱钩”的机制。
BEM 不是命名习惯，是 DOM 层级的平移工具
嵌套不是为了模拟 HTML 结构，而是为了组织 Less 代码。真正可控的结构平移方式，是把层级语义“翻译”进类名里：
- 错：
.card { .header { .title { font-size: 18px; } } }→ 编译为.card .header .title（权重 0-3-0） - 对：
.card__title { font-size: 18px; }→ 权重恒为 0-1-0，可被.card__title--large干净升级 - 布局类（如
.container、.row）禁用深层嵌套——它们本该解耦复用，嵌套反而掩盖职责分离问题
最常被忽略的一点：BEM 类名必须和 DOM 中实际存在的 class 一一对应。你写了 &__title，HTML 就得真有 class="card__title"，否则再规范的 Less 也救不了样式外溢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
