使用 html[data-theme] 是唯一同时满足 SSR 安全、prefers-color-scheme 同步、PurgeCSS 可靠保留和原生控件兼容的主题方案；禁用 body--dark 等 class 写法，BEM 修饰符只管状态不管主题，品牌与明暗需分层控制，变量必须带 fallback 且媒体查询与 JS 协同生效。
用 html[data-theme] 而不是 .body--dark 或 .app--dark
直接给 html 元素加 data-theme 属性，是唯一能同时满足 SSR 安全、prefers-color-scheme 同步、PurgeCSS 可靠保留、原生控件兼容的方案。写 body--dark 或 app--dark 会立刻导致选择器权重失控、系统偏好不同步、表单控件颜色异常。
常见错误现象：body--dark .button--primary 这类高权重选择器，后续加 .button--loading 时样式被压制；prefers-color-scheme: dark 触发后 JS 没监听或漏同步，页面一半深一半浅。
-
document.documentElement.dataset.theme = "dark"是唯一推荐的 JS 切换方式，不操作任何 class - SSR 渲染时若未设
data-theme，所有变量 fallback 值必须可用（如var(--bg-color, #fff)） - 禁用
body.app--dark写法：它破坏语义、干扰可访问性、且无法驱动 CSS 变量更新
BEM 修饰符只管状态，不管主题
--primary、--disabled、--loading 是合法修饰符；--dark 不是。把主题塞进 BEM 修饰符，等于让每个组件都承担全局上下文职责，结果就是所有 .card--dark、.input--dark 都得重复定义，改个主色要搜遍整个项目。
使用场景：用户点击按钮触发 .button--loading，和当前是深色还是浅色无关 —— 这两个维度必须解耦。
立即学习“前端免费学习笔记（深入）”；
-
.button--primary只声明“这是主按钮”，不写具体颜色，只用background-color: var(--btn-bg); -
.button--primary.button--disabled组合时，--disabled只控制opacity和pointer-events，不碰颜色变量 - 禁止出现
.button--dark--primary这类嵌套修饰符，BEM 不支持，构建工具也难校验
多业务品牌换肤需加 --brand-edu 类，但仅用于变量重定义
系统级明暗（data-theme="dark"）和平行业务品牌（data-brand="edu"）是两层独立维度。不能混用，也不能只靠 data-theme 承担品牌职责。
容易踩的坑：写 html[data-theme="edu"] .button--primary { --btn-bg: #0056b3; }，看似可行，但一旦某业务要叠加深色模式（edu-dark），data-theme 值爆炸，选择器权重彻底失控。
- 正确做法：
.button--brand-edu { --btn-bg: #0056b3; }，配合html[data-theme="dark"] .button--brand-edu { --btn-bg: #003d80; } -
--brand-edu必须加在 Block 级（如.card--brand-edu），不能加在 Element（如.card__title--brand-edu）上 - 所有品牌相关变量重定义，必须放在同一份 CSS 文件中，避免加载顺序导致覆盖失效
变量 fallback 和媒体查询必须共存
只靠 JS 切换 data-theme 不够。用户系统偏好是源头，@media (prefers-color-scheme: dark) 必须参与初始变量注入，否则 SSR 首屏白屏、JS 加载失败时样式崩塌。
性能影响：媒体查询定义的变量作用域是 :root，而 JS 设置的 data-theme 是 html 元素，两者不冲突，但 fallback 必须兜底。
-
:root { --bg-color: #fff; }是基础 fallback，不能省 -
@media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; } }提供自动初始值 -
html[data-theme="dark"] { --bg-color: #1a1a1a; }供用户手动覆盖，权重高于媒体查询 - 所有消费点必须带 fallback：
background-color: var(--bg-color, #fff);，少一个就可能白屏
