嵌套和BEM是分工关系：Less嵌套仅减少父类名重复书写，BEM才是控制权重、防止样式外溢的底层机制；应先用BEM命名（如.card__header），再用嵌套收口，避免深层嵌套与权重失控。
嵌套和BEM不是二选一，而是分工关系
Less嵌套不能替代BEM命名，它只是帮你少写几遍父类名；BEM才是控制选择器权重、避免样式外溢的底层机制。很多人以为用了嵌套就“结构清晰”了，结果编译出 .page .layout .main .content .title 这种0-4-0权重的选择器，后续加个.title--large都盖不住。
真正该做的：用BEM定名（如.card__header），再用嵌套收口（.card { &__header {} &__body {} }）。这样既保持单类名权重稳定，又免去重复敲.card。
-
&__header编译后是.card__header，不是.card .card__header，权重没涨 - 别在BEM块里再套子块：
.card { .card__header { .icon {} } }→ 这会生成.card .card__header .icon，权重翻倍，且违背BEM“一个元素一个类”的原则 - BEM修饰符（
--hover）必须配合&拼接：&--hover，不能写成.card--hover单独定义，否则丢失上下文
嵌套超过3层时，BEM命名比缩进更可靠
当你发现要写 .modal { .overlay { .content { .header { h1 {} } } } }，说明已经踩进陷阱——这不是结构问题，是职责没切开。BEM要求把.modal__overlay、.modal__content、.modal__header全定义为平级类，各自独立维护。
Less嵌套此时只该用于状态组合，比如：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.btn {
&--primary {
background: @primary-color;
&:hover { background: darken(@primary-color, 10%); }
}
}
这种写法生成的是 .btn--primary 和 .btn--primary:hover，权重恒为0-1-0，不依赖父级存在。
- 嵌套第4层开始，调试时Chrome DevTools里根本找不到对应源码位置（因为编译后路径太长）
- BEM类名自带语义，
.form-control--error比.form .control .error更易搜索、复用、覆盖 - 用
lessc --lint能检测嵌套深度，但没法提醒你“这里该拆BEM”，得靠人判断
媒体查询和工具类坚决不进嵌套
把@media塞进.card { @media (max-width: 768px) { .header {} } }，等于告诉Less：“每次输出.card .header，都给我裹一层断点”。结果就是同一段CSS在多个断点里重复出现，体积暴涨，且.card__header在移动端的样式可能被其他地方的同名类意外覆盖。
- 媒体查询提级写：
@media (max-width: 768px) { .card__header { ... } }，干净、可预测 - 工具类（
.text-center、.m-2）永远不嵌套——它们本就不该有父级上下文，嵌套反而让.btn .text-center这种无效组合进CSS - 第三方组件（如
.react-datepicker）别用嵌套包裹，直接用其原生类名组合，或加属性选择器（[data-datepicker]）更稳妥
变量和&拼接容易忽略的作用域细节
嵌套里用变量看似方便，但.card { @width: 300px; .header { width: @width; } }没问题，换成.card { width: @width; .header { width: @width; } }就会报错——Less不自动把属性名转成变量，@width必须显式声明。
&也不是万能粘合剂：
-
&.is-active→.card.is-active✅ -
& .is-active（中间有空格）→.card .is-active❌，变成后代选择器，权重+1 -
&:hover正确；单独写:hover会编译成全局:hover，污染整个页面 - 循环mixin里
&绑定的是调用处的选择器，不是mixin定义处的父级，这点极易误判
复杂组件的状态组合（比如.select的open/disabled/error三重叠加），与其靠5层嵌套推导，不如用BEM修饰符 + Mixin封装行为，把逻辑从选择器构造里彻底解耦出来。
