bem语义必然失效，因浏览器从右往左匹配选择器，5层空格链需反复向上验证父级，将样式逻辑绑死在dom位置；sass官方建议嵌套上限为3层，超限说明正用嵌套模拟html层级而非表达语义职责。
嵌套超过3层时，BEM语义必然失效
浏览器匹配选择器是从右往左的，.layout .sidebar .nav .item .link这种5层空格链会让引擎反复向上验证父级，不仅拖慢渲染，更关键的是：它把样式逻辑绑死在DOM位置上。BEM要求每个类名独立生效，而这种选择器一旦挪动HTML结构就断掉——.card__title能随便复制粘贴，.card .header .title不行。
Sass官方明确建议嵌套上限为3层：容器 → 组件 → 状态/伪类（如&:hover、&--active）。超过这个数，说明你正在用嵌套模拟HTML层级，而不是表达语义职责。
- VS Code里按住 Ctrl 点击编译后的CSS文件，直接看生成结果——别靠缩进猜
- 用
stylelint-config-sass-guidelines配置max-nesting-depth: 3，保存即报错 - 遇到
.modal { .overlay { .content { .header { h1 {} } } } }这种写法，立刻停手，拆成_modal.scss+_modal-overlay.scss+_modal-header.scss
& 前后有没有空格，决定输出是拼接还是后代
& 只代表**紧邻上一层的选择器字符串**，和缩进无关，只看空格。有空格就是后代选择器，没空格才是BEM拼接。这是90%的BEM类名错乱根源。
-
.card { .card__header { &__title { color: red; } } }→ 编译出.card__header__title（&指向.card__header，不是.card） -
.card { &__header { &__title { color: red; } } }→ 编译出.card__header__title（语法合法但违反BEM：Element不能嵌套Element） -
.card { &__header { } &__title { } }→ 正确输出.card__header和.card__title两个平级类 - 想保留外层上下文？用变量暂存：
$block: ".card"; #{$block}__title { color: red; }
修饰符必须作用于块或元素本身，不能靠父级状态推导
BEM规定状态应作为修饰符显式加到HTML上，比如 class="btn btn--disabled"，而不是靠 .btn-wrapper--disabled .btn 这种推导。后者让样式依赖DOM位置，复用时极易失效。
- 错误写法：
.btn { &__text { &:hover { color: blue; } } }→ 编译出.btn__text:hover，丢失JS可控性 - 正确写法：
.btn { &--disabled { &__text { color: #999; } } }→ 输出.btn--disabled .btn__text，语义清晰且可由JS开关 - 伪类逻辑必须保留？用
@at-root提离：.btn { @at-root .btn:hover { &__text { color: blue; } } }→ 输出平级的.btn:hover .btn__text - 第三方组件（如Ant Design）带深层嵌套？用BEM wrapper隔离：
<div class="my-form__submit-wrapper"><button></button></div>，再写.my-form__submit-wrapper .ant-btn
别用 @extend 模拟BEM关系
@extend 会在编译期合并选择器，破坏“单一样式来源”原则。比如多个组件都 @extend %button-base，最终CSS里会重复出现同一组声明，体积膨胀，且覆盖逻辑混乱。
- 优先用
%placeholder而非.class-name做@extend目标，避免占位符样式意外输出 - 涉及计算（
calc()、var(--x)）或响应式断点时，@mixin比@extend更灵活、更易调试 -
@extend无法跨文件生效——除非用@use显式导入，且目标必须是%开头 - 真正难的不是写几层嵌套，而是每次敲
{前问一句：这个层级，是业务语义必需的，还是仅仅因为“HTML里它就在里面”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
