BEM 不负责主题切换，主题由 html[data-theme] 驱动 CSS 变量；BEM 修饰符（如 .button--primary）仅声明组件角色，不表达主题语义。
直接结论：BEM 本身不负责主题切换，它只管组件状态；主题必须由 html[data-theme] 驱动 CSS 变量，BEM 修饰符（如 .button--primary）仅声明“这是什么”，不承担“当前是什么主题”的语义。
为什么不能把 --dark 当 BEM 修饰符用
写 .button--dark 看似直观，但立刻带来三类硬伤：
- 语义错位：
--dark描述的是系统级外观偏好，不是按钮自身的状态（比如--disabled或--loading），违反 BEM “块-元素-修饰符”契约 - 样式复用断裂：深色模式下，所有组件都得配一套
--dark版本，.button--primary、.card--highlighted全要重复定义颜色，无法靠变量联动 - 构建与 SSR 风险：PurgeCSS 容易误删未在 HTML 中显式出现的
.button--dark类；SSR 渲染时若 JS 未执行，data-theme缺失，类名已存在但无对应样式，首屏白屏或错色
正确做法：用 html[data-theme="dark"] 控制变量作用域
主题和状态必须解耦——data-theme 提供上下文，BEM 修饰符只声明组件角色：
- HTML 中写
<html data-theme="dark">，而不是<body class="body--dark"> - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #333; --btn-text: #fff; }，不是.button--dark { background: #333; } -
.button--primary自身不声明颜色，只表达“这是一个主要操作按钮”，颜色由变量决定 - 所有变量必须带 fallback：
background-color: var(--btn-bg, #007bff);，防止 JS 加载失败或 SSR 白屏
容易踩的坑：变量重定义范围 + 选择器权重失控
常见错误不是写法不对，而是变量没在正确上下文中覆盖，或选择器层级被意外打断：
立即学习“前端免费学习笔记（深入）”；
- 只在
:root[data-theme="dark"]里改了--text-color，却漏掉--card-bg和--input-border，导致部分组件仍用亮色值 - 写了
.app--theme-dark .button--primary这种高权重选择器，结果后续加的.button--loading样式被压制，加载态图标颜色不变 - 多个主题文件分开打包（
theme-light.css/theme-dark.css），加载顺序不确定，后加载的 CSS 覆盖前者的变量定义 - 用了
body.app--dark而非html[data-theme]，导致prefers-color-scheme: dark媒体查询无法自动同步，也破坏原生表单控件的可访问性
真正难的不是写对一个类名，而是让变量在所有主题上下文中都被完整重定义，且不因选择器权重或构建流程意外失效。这需要构建时校验、运行时 fallback、以及团队对“谁管什么”的清晰共识。
