不能直接用.button--dark控制主题颜色，因其导致组件样式重复、无法联动维护、ssr/js失效时错色，且语义越界；应锚定html[data-theme="dark"]统一控制变量，由bem修饰符专注角色而非主题。
为什么不能直接用 .button--dark 控制主题颜色
很多人一上来就给按钮加 .button--dark，然后在 CSS 里写死 background-color: #1a1a1a。这看似快，但立刻带来三个问题：一是所有组件都要重复写一套 --dark 版本（.card--dark、.input--dark…），二是无法联动——改个主色就得手动搜遍所有文件，三是 SSR 或 JS 加载失败时，.button--dark 类名已存在但样式没加载，页面直接错色。.button--dark 的语义是“这是一个深色按钮”，但它实际承担了“当前系统处于深色模式”的职责，越界了。
html[data-theme="dark"] 是比 body--dark 更可靠的触发点
body--dark 违反 BEM 原则——body 不是你定义的 Block；它也无法响应 prefers-color-scheme，更易被 PurgeCSS 误删。正确做法是把主题上下文锚定在 html 元素上：
- JS 切换只改
document.documentElement.dataset.theme = "dark"，不碰任何 class - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #1e1e1e; --btn-text: #f0f0f0; }，而不是.button--dark - 所有变量必须带 fallback：
background-color: var(--btn-bg, #007bff);，否则首屏可能白屏或错色
.button--primary 只管角色，不管主题
BEM 修饰符负责表达组件身份，不是外观开关。.button--primary 的含义永远是“这是一个主要操作按钮”，它的样式只应声明结构、间距、交互态（如 .button--primary:hover），颜色全部交给变量驱动：
-
.button--primary本身不写background-color，只写background-color: var(--btn-bg); - 禁用态用
.button--primary.button--disabled组合，但.button--disabled只控制 opacity 和 pointer-events，不重写颜色 - 不要写
.button--primary--dark这种嵌套修饰符——BEM 不允许修饰符叠加，语义混乱且难维护
变量重定义必须落在正确作用域，否则部分组件会漏切
常见错误是只在 :root 下改了 --text-color，却忘了同步 --card-bg、--input-border 等变量，导致卡片还是白底、输入框边框仍是浅灰。关键点在于：
- 每个主题分支（
html[data-theme="dark"]）下，所有相关变量必须一次性重定义，不能只改一部分 - 变量作用域靠选择器权重保障：
html[data-theme="dark"] .button--primary比:root里的同名变量优先级更高，但前提是该选择器能真正匹配到元素 - 如果组件渲染在 shadow DOM 或 iframe 内，
html[data-theme]无法穿透，这时得靠:host([data-theme="dark"]) .button--primary单独处理
data-theme，JS 又没执行完，此时所有 var(--x) 都是 undefined，全靠 fallback 值兜底。这个兜底值不是“随便写个默认色”，而是设计系统里明确定义的基准色。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
