最可控的主题实现方式是用 html[data-theme="dark"] 配合 BEM 修饰符重定义 CSS 变量；避免使用 body--dark 等非声明块的修饰符，因其违反 BEM 契约、需手动同步、易被 PurgeCSS 删除且破坏原生组件适配。
直接用 html[data-theme="dark"] 配合 BEM 修饰符（如 .button--primary）重定义 CSS 变量，是最可控、调试最直观的实现方式；硬写 .button--dark 这类主题修饰符会破坏语义、导致复用断裂、增加 SSR 和 PurgeCSS 风险。
为什么不能用 body--dark 或 .app--dark
这不是“不够优雅”的问题，而是立刻引发实际故障：
-
body--dark违反 BEM 契约——body不是你定义的 Block，修饰符只能作用于你声明的块（如.button） - 系统偏好变化时，
window.matchMedia('(prefers-color-scheme: dark)')触发，但body--dark不会自动增删，必须手动监听+同步，漏一处就失焦 - PurgeCSS 构建阶段大概率删除未在首屏 HTML 中出现的
body--dark样式，尤其用户首次访问是浅色模式时 - 原生
<select>、<input>在深色系统下本应自动适配，但被body--dark input强制覆盖后反而不可读
html[data-theme="dark"] 怎么配合 .button--primary 生效
关键不是改类名，而是让变量在正确上下文中重计算：
-
.button--primary只声明变量引用，不写死值：.button--primary {<br> background-color: var(--btn-bg, #007bff);<br> color: var(--btn-text, white);<br>} - 主题覆盖必须用更具体选择器，确保变量重定义生效：
html[data-theme="dark"] .button--primary {<br> --btn-bg: #1e1e1e;<br> --btn-text: #fff;<br>} - 所有颜色/背景等属性统一走
var(--xxx)，且带合理 fallback；不要写.button--primary--dark——这是语义错位，也导致 SSR 白屏、PurgeCSS 误删 - 若组件嵌套深（如
.card__header .button--primary），主题规则也要保持同等深度，或改用:where()降权避免权重失控
JS 切换时只操作 dataset.theme，别碰 class
切换逻辑必须极简，且与 SSR 和初始化对齐：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
document.documentElement.dataset.theme = 'dark'
❌ 绝对避免：document.body.classList.toggle('body--dark')或操作app容器类 - 变量作用域由 HTML 属性决定，而非 DOM 类名存在与否；这意味着 SSR 可直接输出
<html data-theme="dark">，无需等待 JS - 初始化必须早于首屏渲染：在
<script>标签内直接执行，别等DOMContentLoaded - 同步持久化：
localStorage.setItem('theme', newTheme)和dataset.theme必须一起做，缺一不可
真正容易被忽略的是：BEM 修饰符本身不解决主题切换，它只是提供了一个干净的钩子；关键在于把变量作用域锚定在 html 元素上，并确保所有组件都通过 var() 读取，而不是靠选择器层层覆盖样式。
