不要在body上加bem修饰符（如body--dark）控制主题，应改用html[data-theme="dark"]统一注入css变量；因body--dark违反bem命名契约、无法自动同步系统偏好、易被purgecss误删、破坏原生控件样式且不支持变量驱动。
直接结论：不要在 body 上加 BEM 修饰符（如 body--dark）来控制主题变量，这会导致样式失效、构建误删、系统偏好不同步、原生控件不可读等问题。
为什么 body--dark 会破坏主题切换逻辑
这不是“写法不够好”的问题，而是立刻引发运行时断裂：
-
body--dark是非法 BEM 块名 ——body不是你定义的组件块，强行加--dark违反命名契约 -
window.matchMedia('(prefers-color-scheme: dark)')触发时，body--dark不会自动增删，必须手动监听+同步，漏一处就失焦 - PurgeCSS 默认只保留 HTML 中显式出现的 class；如果用户首次访问是亮色模式，
body--dark从未出现在 DOM 中，相关 CSS 极大概率被误删 - 原生表单控件（如
<select></select>）在深色系统下本应自动变暗，但body--dark input强制覆盖背景/文字色，反而让控件不可读或失去系统一致性
正确做法：用 html[data-theme="dark"] 驱动变量注入
主题控制权必须落在根节点上，BEM 修饰符只负责组件状态语义，两者分工明确：
- HTML 中写
，而不是 - CSS 中用
html[data-theme="dark"] .button--primary { --bg-color: #1e1e1e; }覆盖变量，不是重写所有属性 - BEM 修饰符（如
.button--primary）保持不变，它只声明“这是主按钮”，不承担“当前主题是什么”的职责 - JS 切换时只改
document.documentElement.dataset.theme = 'dark'，不操作body.className
如何避免变量 fallback 失效和 SSR 场景白屏
服务端渲染或 JS 加载前，data-theme 可能还没设置，此时变量无值：
- 所有变量必须带 fallback：
color: var(--theme-color, #007bff);，防止 JS 未执行或加载失败时白屏 - SSR 模板中需根据服务端检测到的用户偏好，提前写入
data-theme值（如通过 User-Agent 或 Cookie 判断） - 禁止在 CSS 中写
:root.dark { --theme-color: #252525; }——:root不支持属性选择器，无法响应data-theme变化 - 若用 PostCSS 或 stylelint，配置
ignoreSelectors放行html[data-theme="dark"] .button--primary类型的选择器，否则会被 BEM 规则误报
容易被忽略的细节：BEM 修饰符和 data-theme 的协作边界
关键不在“怎么加类”，而在“谁管什么”：
- 禁止写
.button--primary.button--dark这种组合选择器——它既难复用，又容易因顺序或缺失导致失效 - 每个修饰符只管一件事：
.button--primary控制语义角色，html[data-theme="dark"]控制变量值，二者解耦 - 所有主题相关样式必须收在同一个 CSS 文件中，按组件组织（如
button.css），而不是按主题拆成light.css/dark.css - 如果你在 React/Vue 中传
variant，别拼字符串：className={`btn btn--${variant}`}；改用clsx或class-variance-authority做条件合并，并提前枚举合法值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
