直接用css``生成哈希类名导致降级失效，因其与BEM语义脱钩，丧失可读性、可搜索性及旧浏览器回退能力；必须将BEM逻辑封装进JS层，统一通过block常量派生类名。
为什么直接用 css`` 生成类名会导致降级失效
因为 css 函数返回的是哈希类名（如 css-1a2b3c），它和 BEM 的语义完全脱钩。一旦你在 JS 里写 className={css`...`}，就等于放弃了所有可读性、可搜索性、可推导性——调试时看不到来源，grep 找不到定义，IDE 跳转失效，更别说在旧浏览器里做样式回退了。
真正的问题不是“能不能用 CSS-in-JS”，而是“有没有把 BEM 的归属逻辑带进 JS 层”。BEM 不是写在 CSS 文件里的命名习惯，它是你组织样式意图的骨架。
- 禁止直接拼接字符串：
className={`${BLOCK}__header ${BLOCK}--loading`}—— 空格错一位、少一个下划线，样式就断掉 - 禁止混合使用：比如用
styled.div写块，又手写className="card__title"—— 两个命名体系并存，维护成本翻倍 - 必须统一入口：所有 BEM 类名都从同一个
BLOCK常量派生，比如const BLOCK = 'user-card'
如何让 clsx + BEM 工具函数支撑真实项目
用 clsx 替代字符串拼接只是第一步；关键是要把 BEM 的结构逻辑封装成可复用、可校验的函数，而不是每次手动写 ${BLOCK}__xxx。
推荐这个轻量封装：
立即学习“前端免费学习笔记（深入）”；
const b = (block) => (element, modifier) =>
element
? `${block}__${element}${modifier ? `--${modifier}` : ''}`
: `${block}${modifier ? `--${modifier}` : ''}`;
// 使用
const userCard = b('user-card');
userCard('avatar'); // 'user-card__avatar'
userCard('content', 'loading'); // 'user-card__content--loading'
userCard(null, 'compact'); // 'user-card--compact'
- 所有调用都基于同一
block字符串，保证全局一致性 - 返回值是纯字符串，可直接传给
clsx或emotion的css函数 - 不依赖运行时 DOM 或组件上下文，测试友好，无副作用
@supports 对选择器无效，那 BEM + CSS-in-JS 怎么做兼容判断
@supports 只能检测属性和值（如 @supports (display: grid)），**完全无法检测 :has()、:where() 这类新选择器是否被支持**。很多团队误以为加个 @supports selector(:has(a)) 就能兜底，但 IE、Safari ≤15.3、Firefox ≤108 都不认识这个语法，连条件块都不会解析。
真正可行的路径只有 JS 运行时判断：
const supportsHas = typeof CSS !== 'undefined' && CSS.supports?.('selector(:has(a))');
if (supportsHas) {
// 注入含 :has() 的 emotion css 规则
} else {
// 注入基于 BEM 类名的降级规则，例如 .user-card--has-active-child
}
- 必须先检查
CSS.supports是否存在，IE11 会直接报TypeError - 判断时机要在 DOM ready 后，否则
document.createElement创建的测试节点可能未挂载 - 降级规则不能靠“自动翻译”，而要提前设计语义等效的 BEM 类名（如
user-card--has-active），由 JS 控制添加
BEM 修饰符绑定错元素，是降级失败最隐蔽的坑
比如侧边栏折叠，常见错误是给 sidebar 元素加 sidebar--collapsed 类。问题在于：这个状态实际由 sidebar__trigger（汉堡图标）承载，用户点击它才触发交互；sidebar 只是响应布局变化的容器。
结果就是：
- 旧浏览器里 JS 添加了
sidebar--collapsed，但样式没生效（因为现代规则用了:has()，被静默丢弃） - 动画跳变或卡住，因为降级样式没绑定到真正承载状态的元素上
- 重构时漏掉一处
sidebar__trigger--is-collapsed，整个交互链就断了
正确做法是严格按 BEM 语义拆分职责：sidebar__trigger--is-collapsed 表达用户操作反馈，sidebar--condensed 表达布局响应，两者由 JS 同步控制，但绝不混写在同一元素上。
