不能将 dark 作为 BEM 修饰符写在组件上，因为深色模式是全局主题上下文而非组件自身状态；应使用 data-theme 控制变量作用域，BEM 修饰符仅表达角色，不承担外观职责。
直接用 .button--dark 这类修饰符控制深色模式，是错的——它把系统级外观偏好塞进了组件状态语义里，后续维护、变量复用、构建优化全会出问题。
为什么不能把 dark 当 BEM 修饰符写在组件上
BEM 修饰符（--dark）本意是表达组件自身的变体或状态，比如 --disabled、--loading。而深色模式是全局上下文，不是按钮“自己变暗了”，而是整个页面主题切换后，按钮响应新变量值。
-
.button--dark会导致语义错位：按钮没“变成深色”，只是它所在的主题变了 - PurgeCSS 极易误删：若用户首次访问是亮色模式，
.button--dark类名从未出现在 HTML 中，对应样式大概率被干掉 - 无法响应
prefers-color-scheme：JS 不监听并手动增删该类，系统偏好变化时 UI 就不同步 - 变量复用断裂：每个组件都要写一套
--dark版本，--primary、--secondary、--error全得重复定义，没法靠一个--bg-color统一驱动
正确做法：data-theme 控制变量作用域，BEM 修饰符只声明角色
主题控制权必须锚定在 html 元素上，BEM 修饰符退回到它本来的位置：只说“我是什么”，不说“我现在长什么样”。
- HTML 中写
，不碰body或任何组件 class - CSS 中用
html[data-theme="dark"] .button--primary { --btn-bg: #1e1e1e; --btn-text: #f0f0f0; }，而不是.button--dark { background: #1e1e1e; } -
.button--primary自身不写死颜色，只写background-color: var(--btn-bg);，且必须带 fallback：background-color: var(--btn-bg, #007bff); - 禁用态用组合：
.button--primary.button--disabled，但.button--disabled只设opacity和pointer-events，不重写颜色
变量重定义必须落在正确选择器层级
常见错误不是没写 data-theme，而是变量覆盖范围不对——选中了，但没生效；或者只改了部分变量，漏掉关键项。
- 所有主题相关变量（如
--card-bg、--input-border、--text-color）必须在相同作用域下统一重定义，不能只改--text-color - 如果组件嵌套深（如
.card__header .button--primary），主题覆盖规则也要保持同等权重，或用:where()降权避免冲突 - 块级变量命名要独立：
--card-bg和--header-bg分开，别共用--bg，否则一个覆盖全乱 - 不要在
.button--dark里直接设--theme-color，而应在.button.button--dark上设--button-bg，确保作用域收敛
最容易被忽略的是：BEM 修饰符本身不触发主题切换，它只是一个稳定、可预测的 CSS 钩子；真正起效的是 html[data-theme] + 正确层级的选择器 + 带 fallback 的 var() 调用三者配合。少一个，首屏就可能白屏、错色或不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
