嵌套仅适用于语义强关联的组件内部，超三层需警觉；应改用bem命名、拆分独立类、禁用布局类深层嵌套，并正确使用&绑定父级。
Less嵌套不是“写得像HTML就对了”，它只在语义强关联的组件内部才真正提效；超过三层就该警觉，因为编译后选择器权重飙升、调试困难、复用性归零。
嵌套层级超过三层时，CSS选择器权重失控怎么办
比如 .card { .header { .title { .icon {} } } } 编译后是 .card .header .title .icon，权重达 0-4-0，比单类名 .icon 高出整整四级，后续几乎无法用常规方式覆盖。
- 检查编译输出：一旦看到类似
.page .layout .content .section .item这种 5 级以上组合，说明该拆成独立组件类了 - 改用 BEM 命名收口：
&__body、&--hover显式表达语义，而不是靠缩进模拟 DOM 深度 - 布局类（如
.container、.row）禁用深层嵌套——它们本该解耦复用，嵌套反而掩盖职责分离问题
媒体查询内嵌套必须显式用 & 绑定父级
@media (max-width: 768px) { .nav { a {} } } 编译后是全局 a，不是 .nav a。Less 不知道你要绑定到父选择器上，因为没加 &。
- 正确写法是：
@media (max-width: 768px) { .nav { & a {} } } - 伪类/伪元素必须写成
&:hover、&::before，&后紧跟冒号，中间不能有空格 - 拼接类名用
&.is-active（无空格），后代选择器才用& .child（有空格） - 子选择器必须显式写
& > .item，不能依赖缩进——默认空格就是后代关系
什么时候该用嵌套，什么时候该收手
嵌套本质是给人看的，不是给浏览器优化的。它不改变最终 CSS 的运行时性能，只影响人读代码时的认知负荷。
- ✅ 适合：
.modal { &__header {}, &__body {}, &__footer {} }——语义清晰、命名收敛、结构固定 - ❌ 不推荐：
.container { .row { .col-6 {} } }——布局类本应解耦，嵌套反而掩盖职责分离 - ⚠️ 高危：
@media (max-width: 768px) { .nav { li { a {} } } }——调试定位困难，编译后选择器冗长且易被更高权重规则覆盖 - 状态类（
:hover、:disabled）优先在嵌套内用&表达；主题变体（--primary、--outline）用带参数的mixin+ 嵌套调用，而非复制整块样式
嵌套中 & 符号的常见误用和边界
& 表示当前选择器自身，不是自动拼类名的魔法开关。用错位置会破坏 BEM 语义，生成不可组合的选择器。
-
.card { .header { &__logo {} } }→ 编译为.card .header .card__logo：多出无意义的.header层级，权重升高且语义断裂 -
.form { &__field { &:focus { &::placeholder {} } } }→ 已跨三层（块→元素→伪类→伪元素），DevTools 中很难定位来源 -
.btn { &:hover { &::before {} } }→ 编译为.btn:hover::before，合法但冗余；实际应单独定义.btn--primary:hover::before - 字符串拼接类名？别用
+或插值@{var}，VS Code 插件无法识别，且丢失语法校验；BEM 类名是静态契约，直接手写.card { &__title {} }更安全
真正容易被忽略的是：每次敲下 { 前得想清楚——这个结构是给机器执行的，还是给人看的？前者要克制，后者要可追溯。嵌套写错，后面全是债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
