不能在body上用body--dark这类BEM修饰符，因为body不是自定义组件块，违反BEM契约；无法自动响应系统偏好变更；PurgeCSS易误删未渲染class；强制覆盖原生控件样式破坏系统一致性；应改用:root+@media+color-scheme方案。
为什么不能在 body 上用 body--dark 这类 BEM 修饰符
直接结论：这么做会立刻导致主题逻辑断裂，不是“不够优雅”，而是运行时失效。
body--dark 违反 BEM 基本契约——body 不是你定义的组件块，它没有 body__element 或 body--modifier 的语义合法性。更实际的问题是：
- 系统偏好变更（
window.matchMedia('(prefers-color-scheme: dark)')）不会自动增删这个 class，必须手动监听+同步，漏一次就不同步 - PurgeCSS 默认只保留 HTML 中显式出现的 class；若用户首次访问是亮色模式，
body--dark从未渲染过，对应 CSS 极大概率被构建阶段误删 - 原生控件（如
<select>、滚动条）在深色系统下本应自动变暗，但body--dark input强制覆盖样式，反而让控件不可读或失去系统一致性
:root + @media (prefers-color-scheme: dark) 是最简自动方案
纯 CSS 实现系统级响应，不依赖 JS，加载即生效，但必须严格满足三要素：
- 所有变量必须先在
:root中明确定义默认值（以亮色为基准），再在媒体查询中完整覆盖；漏定义一个变量，var(--xxx)就会 fallback 到浏览器默认或初始值 - 深色规则必须放在所有亮色样式之后，否则会被后续无条件声明覆盖（CSS 优先级按顺序，不是媒体查询自带权重）
- 必须加
html { color-scheme: light dark; }，否则表单控件、滚动条、SVG 填充等原生元素不响应
示例结构：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f0f0f0;
--border-color: #333333;
}
}
html { color-scheme: light dark; }
body {
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
}
手动切换必须用 data-theme 而非 class 控制变量
用户点击按钮切换主题后刷新页面，仅靠媒体查询会回退——它不保存状态。JS 必须介入，但控制点不能落在 body class 上。
- 推荐写法：
document.documentElement.setAttribute('data-theme', 'dark')，然后 CSS 写html[data-theme="dark"] { --bg-color: #1a1a1a; } - 初始化时优先读
localStorage.getItem('theme')，没值再 fallback 到matchMedia检测结果 - 监听
matchMedia('(prefers-color-scheme: dark)')的change事件，但只在用户未手动选择时才响应，避免覆盖用户主动设置 - 绝对不要用
style属性直接写变量，会和媒体查询冲突且无法继承
BEM 组件内部怎么写才不耦合主题逻辑
BEM 修饰符（如 .button--primary）只表达组件状态，不承担主题判断职责。主题变量应由根节点注入，组件只需消费。
- 按钮写法应是：
<button class="button button--primary">提交</button>，不带button--dark这类主题修饰符 - 对应 CSS 中，
.button--primary只声明“这是主按钮”，颜色全部来自var(--primary-bg)等变量，而不是写死background: #007bff或background: #4dabf7 - 如果某个组件在深色下需微调（比如阴影强度），用
html[data-theme="dark"] .card { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }，而非新增 BEM 修饰符
真正容易被忽略的是变量命名粒度和原生元素桥接——--color-text-primary 比 --text 更安全，而 color: CanvasText 这类系统色必须显式映射到变量里，否则媒体查询一换，input 边框还是亮色。
