bem在sass中不会自动生效，&__element90%编译为.card .card__title（带空格后代选择器），而非扁平类名.card__title；必须用@at-root #{&}__element或手动写死类名才能正确生成bem结构。
直接说结论：BEM 在 Sass 里不是“自动生效”的，&__element 这种写法 90% 会产出带空格的后代选择器（如 .card .card__title），而不是你要的扁平类名 .card__title。必须用 @at-root + 插值或手动写死类名，否则 BEM 就只是徒有其表。
为什么 &__element 会编译出错误的选择器？
Sass 的 & 是字符串拼接操作符，不是 BEM 语义识别器。它原样保留父选择器的全部内容——包括空格、换行、伪类、属性选择器。
-
.card { &__title { } }→ 编译为.card .card__title（多一个空格，变成后代选择器） -
.btn { &:hover { &__icon { } } }→ 编译为.btn:hover__icon（非法类名，浏览器直接忽略） -
.sidebar .widget { &__header { } }→ 编译为.sidebar .widget__header（.widget__header被当成独立块，破坏归属语义）
怎样安全生成 block__element 和 block--modifier？
唯一稳定的方式是跳出嵌套上下文，在根层级定义类名。核心是 @at-root + #{&} 插值，且只在纯块级选择器内使用。
- 元素写法：
@at-root #{&}__content { color: #333; }→ 输出.card__content - 修饰符写法：
@at-root #{&}--loading { opacity: .6; }→ 输出.card--loading - 块名是变量时（如
$block: "modal"）：@at-root #{$block}__close { } - 禁止在
&:hover、&[disabled]、@media内部再用@at-root #{&}__xxx，输出顺序不可控，也违背 BEM 层级契约
怎么避免多人协作时类名不一致？
BEM 的 __ 和 -- 是工具链识别的语法锚点，不是风格偏好。写错一个下划线，lint 就报错，VS Code 插件不亮色，构建提取逻辑漏掉它。
- 禁止在
@mixin内做字符串替换（如str-replace($name, "_", "__")），Sass 字符串函数不可靠且难调试 - 分隔符必须显式声明为变量：
$element-separator: '__'，不能硬编码在拼接里 - 循环生成修饰符时，
@each $modifier in ("hover", "disabled")—— 引号不能省，否则hover被当未定义变量 - 连字符参与拼接要防误解析：
#{$block}__#{$el}#{"--hover"}，不能写成#{$block}__#{$el}--hover（Sass 当减法运算）
React + CSS Modules 下，styles['card__body'] 是 undefined 怎么办？
90% 是文件名、类名、JSX 访问键三者没对齐。CSS Modules 的哈希前缀由文件名决定，不是类名。
- CSS 文件必须叫
Card.module.css（PascalCase，与组件名一致），不能是card.module.css - CSS 文件里必须写
.card__body { }，不能写.card-body或.body - JSX 中必须用字符串访问：
styles['card__body']，不能写styles.card__body（语法错误）或styles['Card__body']（大小写不匹配） - 调试建议：配置
localIdentName=[name]__[local]___[hash:base64:5]，编译后类名带原始名，一眼可查来源
真正容易被忽略的点是：BEM 不是命名长度问题，而是结构契约。写错一个 __，就等于让整个工具链“失明”；依赖 & 自动拼接，就等于把语义权交给 Sass 的字符串规则——而它根本不认识 BEM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
