Sass嵌套与BEM冲突，&前后空格决定后代或拼接，超3层嵌套应拆组件，第三方样式用BEM wrapper隔离，确保类名独立生效。
因为 Sass 的嵌套语法和 BEM 的扁平原则天然冲突，& 一写错空格，输出就不是你想要的类名；更关键的是，人容易把“缩进看起来像父子”当成“语义上该嵌套”，结果编译出 .card .card__header .card__title 这种三连空格选择器——它既违背 BEM，又让权重翻三倍，还让 DevTools 里根本找不到源码位置。
为什么 & 前后一个空格，输出天差地别
& 只代表**上一层选择器的完整字符串**，不看缩进，只看有没有空格。有空格就是后代选择器，没空格才是 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两个平级类
VS Code 里按住 Ctrl 点击编译后的 CSS 文件，直接看生成结果——别靠缩进猜。
嵌套超过 3 层时，浏览器已经开始卡了
浏览器匹配选择器是从右往左的。.layout .sidebar .nav .item .link 这种 5 层空格链，会让引擎先找所有 .link，再逐层向上验证父级是否存在。DOM 越深、更新越频繁，渲染越慢。
立即学习“前端免费学习笔记（深入）”；
- Lighthouse 报 “Avoid overly specific selectors”，源头就在这
- Sass 官方推荐嵌套上限是 3 层：容器 → 组件 → 状态/伪类（如
&:hover、&--active） - 一旦出现
.modal { .overlay { .content { .header { h1 {} } } } }，说明结构已失控，该拆组件了
第三方组件库一加，层级立刻爆炸
Ant Design 的 .ant-btn 自带深层嵌套或 !important，很多人第一反应是写 .my-form .ant-btn 去覆盖——这等于主动加一层，还把样式绑死在外部类名上。
- 用容器隔离：
<div class="my-form__submit-wrapper"><button></button></div>，再写.my-form__submit-wrapper .ant-btn - 不直接覆盖第三方类名，优先改 wrapper 的 BEM 类，例如
.my-form__submit-wrapper--loading控制整体状态 - 对方真用了
!important？你只能也用，但必须带完整 BEM 路径：.my-form__submit-wrapper .ant-btn--override，而不是.ant-btn
BEM 的类名本身不复杂，真正难的是守住「每个类名必须独立生效」这条线——它要求你每次敲下 & 之前，都得问一句：这个输出的选择器，能不能只靠自己存在？
