不能把主题当成BEM修饰符写进组件类名里，如.button--dark会破坏语义、导致复用断裂、SSR白屏、PurgeCSS误删且无法响应系统偏好；应统一用html[data-theme="dark"]控制变量，BEM修饰符仅表达组件角色，变量必须带fallback以防白屏。
不能把主题当成 BEM 修饰符写进组件类名里，比如 .button--dark 或 .card--high-contrast —— 这会破坏语义、导致复用断裂、SSR 白屏、PurgeCSS 误删，且无法响应系统偏好。
为什么 body--dark 是非法且危险的写法
body 不是你定义的 Block，body--dark 直接违反 BEM 命名契约。更实际的问题是：
- window.matchMedia('(prefers-color-scheme: dark)') 触发时，它不会自动增删，必须手动监听并同步，漏一处就失焦
- PurgeCSS 默认只保留 HTML 中显式出现的 class；若用户首次访问是亮色模式，
body--dark从未渲染，相关 CSS 极大概率被构建阶段误删 - 原生表单控件（如
<select>）在深色系统下本应自动变暗，但body--dark input强制覆盖样式，反而让控件不可读 - 选择器权重失控：
body--dark .button--primary这种高权重规则，后续加的.button--loading很容易被压制
html[data-theme="dark"] 是唯一推荐的根级控制方式
主题控制权必须落在 html 元素上，和 BEM 修饰符解耦。JS 切换时只操作：
document.documentElement.dataset.theme = 'dark'
CSS 中写：
立即学习“前端免费学习笔记（深入）”；
html[data-theme="dark"] .button--primary {<br> --btn-bg: #333;<br> --btn-text: #fff;<br>}
关键点：
- 所有变量必须带 fallback：
background-color: var(--btn-bg, #007bff);，否则 SSR 或 JS 加载失败时白屏 - 禁止写
:root.dark { --color: #252525; }——:root不支持属性选择器，data-theme变化时不会响应 - SSR 模板中需根据服务端检测（User-Agent / Cookie / headers）提前写入
data-theme值
组件内如何响应主题而不污染结构
BEM 修饰符只管“我是什么”，不管“当前环境什么样”。按钮的语义是 .button--primary，不是 .button--dark。响应主题靠变量注入，而非重写样式：
-
.button--primary自身不声明颜色，只声明角色：“这是一个主操作按钮” - 颜色、边框、阴影等外观全部交由
var(--btn-bg)等变量驱动 - 禁用组合类名：
.button--primary.button--dark是错的 —— 它把状态和主题耦合，破坏正交性 - 若用 Sass，可用
@at-root .app--theme-dark { .button { ... } }提升作用域，比嵌套更可控
多主题叠加时修饰符怎么写才合法
多个主题共存（如深色 + 高对比度），必须叠加修饰符，不能拼接：
- ✅ 正确：
app app--theme-dark app--theme-high-contrast - ❌ 错误：
app--theme-dark-high-contrast（修饰符不可嵌套） - ❌ 错误：
app--dark（缺少--theme-前缀，语义丢失） - ❌ 错误：
dark-app或app-dark（前者不是 Block 为主语，后者单连字符被识别为新块名）
真正难的不是语法，而是变量是否在每个主题上下文中完整覆盖 —— 漏一个 --card-border，卡片边框就会回退到浏览器默认值，这种断裂很难被肉眼发现。
