如何在Sass和SCSS项目中落地CSS BEM命名规范？

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 语义识别器。它原样保留父选择器的全部内容——包括空格、换行、伪类、属性选择器。

1. .card { &__title { } } → 编译为 .card .card__title（多一个空格，变成后代选择器）
2. .btn { &:hover { &__icon { } } } → 编译为 .btn:hover__icon（非法类名，浏览器直接忽略）
3. .sidebar .widget { &__header { } } → 编译为 .sidebar .widget__header（.widget__header 被当成独立块，破坏归属语义）

怎样安全生成 block__element 和 block--modifier？

唯一稳定的方式是跳出嵌套上下文，在根层级定义类名。核心是 @at-root + #{&} 插值，且只在纯块级选择器内使用。

1. 元素写法：@at-root #{&}__content { color: #333; } → 输出 .card__content
2. 修饰符写法：@at-root #{&}--loading { opacity: .6; } → 输出 .card--loading
3. 块名是变量时（如 $block: "modal"）：@at-root #{$block}__close { }
4. 禁止在 &:hover、&[disabled]、@media 内部再用 @at-root #{&}__xxx，输出顺序不可控，也违背 BEM 层级契约

怎么避免多人协作时类名不一致？

BEM 的 __ 和 -- 是工具链识别的语法锚点，不是风格偏好。写错一个下划线，lint 就报错，VS Code 插件不亮色，构建提取逻辑漏掉它。

1. 禁止在 @mixin 内做字符串替换（如 str-replace($name, "_", "__")），Sass 字符串函数不可靠且难调试
2. 分隔符必须显式声明为变量：$element-separator: '__'，不能硬编码在拼接里
3. 循环生成修饰符时，@each $modifier in ("hover", "disabled") —— 引号不能省，否则 hover 被当未定义变量
4. 连字符参与拼接要防误解析：#{$block}__#{$el}#{"--hover"}，不能写成 #{$block}__#{$el}--hover（Sass 当减法运算）

React + CSS Modules 下，styles['card__body'] 是 undefined 怎么办？

90% 是文件名、类名、JSX 访问键三者没对齐。CSS Modules 的哈希前缀由文件名决定，不是类名。

1. CSS 文件必须叫 Card.module.css（PascalCase，与组件名一致），不能是 card.module.css
2. CSS 文件里必须写 .card__body { }，不能写 .card-body 或 .body
3. JSX 中必须用字符串访问：styles['card__body']，不能写 styles.card__body（语法错误）或 styles['Card__body']（大小写不匹配）
4. 调试建议：配置 localIdentName=[name]__[local]___[hash:base64:5]，编译后类名带原始名，一眼可查来源

真正容易被忽略的点是：BEM 不是命名长度问题，而是结构契约。写错一个 __，就等于让整个工具链“失明”；依赖 & 自动拼接，就等于把语义权交给 Sass 的字符串规则——而它根本不认识 BEM。