嵌套超3层会引发样式失效、调试困难与性能下降；根本原因是html未显式书写基础bem类名（如缺card导致.card__title不匹配），且&仅指向最近父选择器，空格影响编译结果，应优先用bem扁平化重构。
嵌套超过 3 层时，Sass 不是在帮你组织代码，而是在悄悄埋下样式失效、覆盖困难、调试崩溃的引信。
为什么 &__title 编译后没生效
根本原因不是语法写错，而是 HTML 没有显式携带基础类名。&__title 编译成 .card__title，但如果你的 HTML 只写了 <h2 class="title"></h2> 或 <h2 class="card__title"></h2> 却漏了 card，那这个规则就完全不匹配。
- 必须同时存在
card和card__title：…
-
&的作用域只认最近一层父选择器：在.card { .header { &__title { } } }中，&是.header，不是.card，结果编译出.header__title—— 这直接破坏 BEM - 检查
&前有没有空格：有空格（.card { .title { &--large { } } }）→ 编译为.title--large；没空格（.card { &__title { } }）→ 编译为.card__title
嵌套超 3 层后浏览器匹配变慢
CSS 选择器是从右往左匹配的。.page .main .content .card .title 这种写法会让浏览器先找所有 .title，再逐层向上验证父级，DOM 节点越多、动态更新越频繁，性能损耗越明显。
- 4 层嵌套是临界点：一旦出现
.a .b .c .d，优先重构为 BEM 类名，比如.card__title+.card--compact - 后代选择器（空格）比子选择器（
>）更不可控：用>能切断意外继承，也避免生成过长链 - 不要用标签名嵌套：
ul li a→ 换成.nav__link，否则 HTML 改用nav标签就全挂
用 @use 隔离模块，别靠嵌套“模拟作用域”
嵌套本身不提供作用域隔离。你以为 .modal { .header { ... } } 把样式锁在 modal 里，其实只是生成了更长的选择器，照样可能被外部高权重要素覆盖。
- 每个组件建单独文件：
_button.scss、_card.scss，用@use "button"显式导入 - 禁止跨文件
@extend：目标必须是%placeholder，且@use后要用button.%base这种带命名空间的写法 - 变量暂存外层上下文更可靠：
$block: ".card"; #{$block}__title { }，比多层嵌套加&更可控
BEM 类名不是格式要求，是职责约束
card__header__title 看似嵌套合理，实则违反 BEM 原则：Element 不能嵌套 Element。它暴露的是 DOM 层级，不是语义职责。
- Block 必须独立可复用：
search-form，不是top-search（含位置）或blue-search（含样式） - Element 只描述角色：
search-form__input，不是search-form__header__title - Modifier 只开关状态：
button--disabled合法，button--bg-blue违规——颜色应由设计系统变量控制，不塞进类名 - 所有 BEM 类必须显式出现在 HTML 中：
<div class="card"> <h2 class="card__title">，缺一不可 </h2> <p>真正卡住团队的，从来不是 Sass 会不会嵌套，而是 HTML 里漏写了一个 <code>card类，或是把&__title写在了错误的父级块下——这种问题不会报错，只会让样式在某个页面突然消失，且 DevTools 里查不到匹配规则。
