属性选择器嵌套必须用&[data-open="true"]才能绑定父级，漏写&会编译为全局规则；&不是可选语法糖，而是强制标记，如.nav{&[data-open="true"]{}}输出.nav[data-open="true"]。
属性选择器嵌套必须带 & 才能绑定父级
直接写 [data-open="true"] 会脱离上下文，编译成全局规则；必须用 &[data-open="true"] 才能拼出 .nav[data-open="true"] 这样的完整选择器。漏掉 & 是最常见错误，它不是语法糖，而是强制绑定标记。
常见陷阱：
-
.nav { [data-open] { ... } }→ 编译为[data-open]（全局匹配） -
.nav { &[data-open] { ... } }→ 正确输出.nav[data-open] - 多个属性要连写：
&[data-open="true"][data-anim]，中间不能有空格 -
&:hover[data-open]是合法的，但拆成&:hover { [data-open] { ... } }就失效了
& 在伪类/伪元素中必须紧贴，不能有空格
&:hover 和 &::before 是标准写法；& :hover（带空格）会被当成后代选择器，编译成 .btn :hover，匹配的是按钮内部任意悬浮元素，不是按钮自身。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 伪类、伪元素必须以
&开头，且中间无空格 -
&.is-active:hover→.btn.is-active:hover -
&__header::before→.card__header::before - 想给父元素加伪元素，别依赖嵌套层级，显式写
.card::before更可靠
子选择器 > 要显式声明，避免意外生成后代选择器
写 > .item 会编译为 .list > .item；而只写 .item 默认是后代选择器 .list .item。后者权重更高、匹配更宽泛，容易误命中深层 DOM。
为什么这很重要：
- 视觉缩进 ≠ 语义层级，Less 不会自动把缩进转成
> -
.menu { .item { ... } }→.menu .item（权重 0,1,1） -
.menu { > .item { ... } }→.menu > .item（权重同上，但匹配更精确） - 响应式或状态切换时，
>能避免样式泄漏到嵌套更深的子项
BEM 命名必须靠 &__xxx 主动构建，不能靠嵌套推导
嵌套三层如 .modal { .header { .title { ... } } } 会生成 .modal .header .title，不是你想要的 .modal__title。BEM 的扁平类名必须靠 & 显式拼接。
正确姿势：
-
.card { &__header { ... } &__body { ... } }→.card__header、.card__body -
&__footer.is-expanded→.card__footer.is-expanded - 不要写
.card { .footer { ... } }期望它变成.card__footer，它不会 - DOM 结构固定且深时，优先提取独立类名（如
.table-cell-actions），而非靠嵌套模拟
.page .layout .content .section .item 这种七级选择器，连 !important 都救不回来。 
