不能只靠data-theme切换完事，因BEM组件不自动继承主题语义，必须用html[data-theme="dark"] .card--dark等高权重选择器显式重定义变量，否则组件样式错乱；修饰符禁嵌套，变量须统一命名并带fallback。
为什么不能只靠 data-theme 切换就完事？
因为 data-theme 只控制根级变量作用域，而 BEM 组件（如 .card__header）本身不继承主题语义——它只认自己类名和父容器。如果只改 html[data-theme="dark"] 下的 --theme-color，但没把该变量注入到 .card--dark 对应的作用域里，.card__header 依然用的是默认值。
常见错误现象：.card--dark .card__header 文字还是浅色，背景却变深了，对比度崩坏；或者切换主题后部分组件颜色没变，查 DOM 发现类名已加，但 CSS 规则压根没生效。
-
.card--dark必须显式参与变量重定义，不能指望它自动“感知”data-theme - 变量覆盖必须比基础规则更具体，比如用
html[data-theme="dark"] .card--dark { --card-bg: #1e293b; }，而不是只写.card--dark { --card-bg: #1e293b; } - 所有主题相关变量声明必须放在同一份 CSS 文件中，否则加载顺序错乱会导致后加载的主题样式被前一份覆盖
.button--primary--dark 这种写法为什么危险？
它违反 BEM 的语义契约：修饰符（--dark）本应表达组件自身状态，而不是叠加另一个维度（主题）。一旦业务需要同时支持「暗色主题 + 禁用态」，.button--primary--dark--disabled 就会爆炸式膨胀，且无法预测优先级。
正确做法是把主题控制权收归根节点，组件只响应：.button--primary 声明 background-color: var(--button-bg);，而 html[data-theme="dark"] .button--primary 负责重设 --button-bg。
立即学习“前端免费学习笔记（深入）”；
- 禁止在修饰符中硬编码颜色，例如
.button--primary--dark { background: #1a1a1a; } - 允许的组合只有
.button--primary+html[data-theme="dark"]，修饰符不嵌套 - 如果真要表达“当前按钮属于教育品牌且适配暗色”，应拆成两个独立维度：
.button--primary--brand-edu（品牌） +html[data-theme="dark"]（主题）
如何让 data-theme 和 BEM 修饰符真正联动？
关键不是“绑定”，而是“选择器协同”。BEM 修饰符提供钩子，data-theme 提供上下文，两者通过 CSS 选择器拼接形成高权重规则，确保变量被精准重写。
示例结构：
:root {
--button-bg: #007bff;
}
.button--primary {
background-color: var(--button-bg);
}
html[data-theme="dark"] .button--primary {
--button-bg: #1d1d1d;
}
html[data-theme="warm"] .button--primary {
--button-bg: #d32f2f;
}
- 所有主题变量必须带 fallback：
background-color: var(--button-bg, #007bff);，防止 JS 未执行或属性丢失时白屏 - 若组件嵌套深（如
.modal__content .button--primary），主题覆盖规则也需同步加深：html[data-theme="dark"] .modal__content .button--primary，否则权重不够 - 避免用
body.dark .button--primary替代html[data-theme="dark"]，前者无法隔离变量作用域，容易污染全局
构建时怎么防住修饰符滥用？
BEM 修饰符本身不校验语义，全靠工程约束。PostCSS 插件可以拦截孤立的 --xxx 类名，比如匹配 [class*="--"] 但不以 .button、.card 等合法 block 开头的选择器，直接报错。
真实项目里最容易漏的是：不同团队维护的组件库各自定义 --dark，但变量名冲突（--text-color vs --fg-color），或 fallback 值不一致导致 SSR 首屏闪动。
- 变量命名必须统一前缀，如
--color-primary、--space-md，禁用--main-text这类模糊命名 - SSR 场景下，服务端渲染必须同步注入
data-theme属性，否则客户端首次 hydration 会触发一次无效重绘 - 伪类（
:hover、:focus）中引用变量时，务必确认该变量在对应主题上下文中已被定义，否则取 fallback 值可能不符合预期
