Sass中连字符不会自动拼接，必须用&显式连接生成扁平BEM类名；错误写法如.__element会产出后代选择器，正确写法是&__element或@at-root #{&}__element，且&后不可加空格、不可跨层嵌套、不可在伪类或属性选择器内误用。
连字符在Sass中不是自动拼接的，得靠&显式连接
很多人以为写 .block__element 时，Sass 会自动把连字符当分隔符处理——其实不会。& 是唯一能安全复用父选择器并插入连字符的方式。不加 &，就只是普通嵌套，生成的 CSS 会多一层层级，破坏 BEM 的扁平结构。
常见错误：直接写 .block { __element { ... } }，结果生成 .block __element（后代选择器），而不是 .block__element。
-
&必须紧贴连字符使用，比如&__element、&--modifier，中间不能有空格 - 如果父选择器带类名前缀（如
.c-card），&__header会生成.c-card__header，符合 BEM 命名规范 - 嵌套过深时，
&只绑定最近的父级，不会跨层“继承”最外层块名
& 在多重嵌套里容易漏掉或错位
写 .block { &__elem { &--mod { ... } } } 看似合理，但实际生成的是 .block__elem--mod —— 这没问题；可一旦写成 .block { __elem { &--mod { ... } } }，& 就指向 __elem，结果变成 __elem--mod（非法类名），浏览器直接忽略。
更隐蔽的问题：在媒体查询或伪类中误用 &，比如 &:hover { &__icon { ... } }，会生成 .block:hover .block__icon，而非预期的 .block--hover__icon（后者极少用，但意图必须明确）。
立即学习“前端免费学习笔记（深入）”；
- 只要想生成新类名（而非后代关系），就必须以
&开头 -
&后不能跟空格，& __item和&__item效果完全不同 - 用 VS Code 或 WebStorm 时，开启 Sass 语法高亮和括号匹配，能快速发现
&悬空或缺失
BEM 修饰符（modifier）必须和块/元素共存，不能单独存在
Sass 里写 .block--theme-dark 没问题，但若只写 &--theme-dark 而没挂载到块上，编译后就是孤立的 --theme-dark，CSS 无效。BEM 规范要求修饰符必须依附于块或元素，比如 .block--theme-dark 或 .block__button--disabled。
一个典型翻车场景：把修饰符写在嵌套最外层，比如 .block--theme-dark { &__title { ... } }，这没问题；但若写成 .block { &--theme-dark { &__title { ... } } }，就会生成 .block--theme-dark__title —— 这违反 BEM，因为修饰符不该改变元素的命名结构。
- 修饰符永远修饰块或元素本身，不是用来生成新元素的
- 多个修饰符并存时（如
.block--theme-dark.block--size-large），Sass 中应分开写，避免用&--theme-dark--size-large - 用
@if+$modifiersmap 动态生成修饰符时，确保每个 key 都对应合法的&--xxx形式
用 @extend 模拟 BEM 共享样式？小心选择器爆炸
有人想用 @extend 复用 .block__element 的样式，但 @extend 会把所有引用它的选择器合并输出，比如 .card__content 和 .list__item 同时 @extend %typography，最终 CSS 里可能出现 .card__content, .list__item, .card__content--bold, .list__item--bold 这种冗余链，破坏 BEM 的语义隔离。
真正轻量的做法是抽离工具类（如 .u-text-bold）或用 @mixin，而不是靠 @extend 绑定 BEM 类名。
-
@mixin传参控制变体（如@mixin element-modifier($state: default)）比@extend更可控 - Webpack 或 Vite 项目中，如果启用了 CSS Modules 或 scoped style，
&仍有效，但需确认预处理器 loader 配置支持嵌套语法 - 生产环境建议开 Sass 的
style: 'compressed'，否则&__item类名展开后可能因空格缩进异常导致解析失败
& 是工具，连字符是约定，写错一个空格或漏掉一个 &，生成的类名就失效——它不报错，只是静默不生效。 
