三层嵌套是css权重与性能临界点，超三层会导致匹配变慢、权重飙升至0-4-0难以覆盖；应使用bem式扁平命名（如.card__title）和&拼接替代深层嵌套，媒体查询与伪类须显式绑定父级。
Less深层嵌套直接生成高权重选择器，比如 .card .header .title .icon 权重是 0-4-0，单个类名根本压不住——这不是覆盖技巧问题，是结构设计错误。
为什么三层就是临界点
浏览器匹配 CSS 是从右往左回溯的，每多一层嵌套，就多一次父级验证。四层开始，不仅匹配变慢（低端 WebView 可能慢 4 倍），更致命的是权重跃升：0-3-0 还能用 .title--highlight 覆盖；0-4-0 就得写 .title--highlight, .card .header .title .icon 或加 !important，等于放弃维护性。
-
.btn { &--primary { &:hover { color: blue; } } }编译为.btn--primary:hover，权重恒为 0-2-1，安全 -
.modal { .overlay { .content { h1 { } } } }编译为.modal .overlay .content h1，权重 0-3-1，已越界 - 伪类/伪元素不计入层级计数，但空格写错会触发解析失败：
&:hover正确，& :hover报Unknown word
用 & 拼接替代缩进嵌套
嵌套不是为了模拟 DOM 深度，而是为了生成语义清晰、权重可控的类名。BEM 不是命名习惯，是降权工具。
- 把
.card { .header { .title { color: red; } } }改成.card { &__title { color: red; } }，输出.card__title（0-1-0） - 状态组合要扁平：
.btn { &.is-disabled { &__icon { opacity: 0.3; } } }→.btn.is-disabled .btn__icon，比.btn.is-disabled .icon更可控 - 千万别写
.nav { .item { a {} } }，应提为.nav-item-link或用@at-root脱离嵌套链
媒体查询和伪类必须显式绑定父级
媒体查询内漏 &，Less 就不知道你要绑定谁，结果生成全局规则，完全脱离上下文。
- 错误：
@media (max-width: 768px) { .nav { li { a {} } } }→ 编译出a全局样式 - 正确：
@media (max-width: 768px) { .nav { & li { a {} } } }→@media (max-width: 768px) { .nav li a {} } - 伪类必须紧贴
&：&:hover、&::before，中间不能有空格；拼接类名用&.is-active，后代才用& .child
真正难的不是写对语法，而是每次敲下缩进前，先问一句：这个“深”是不是真由语义决定？还是只是 HTML 结构的惯性迁移。编译后一眼看到 .page .layout .main .content .text 这种五级链，就该立刻删掉三层缩进，而不是加 @at-root 补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
