不能把主题当BEM修饰符用，如.button--dark会破坏语义、导致SSR白屏、被PurgeCSS误删且无法复用颜色变量；应改用html[data-theme]注入CSS变量，BEM仅作钩子。
不能把主题当BEM修饰符用，比如写 .button--dark 或 .card--light —— 这类写法会破坏语义、导致 SSR 白屏、被 PurgeCSS 误删，且无法复用颜色变量。
为什么 .button--dark 是错的
BEM 修饰符只该表达组件自身的状态或变体（如 .button--disabled、.button--loading），不是系统级上下文。--dark 描述的是整个页面的主题偏好，不是按钮的内在角色。
- 语义错位：
.button--dark看起来像“一个深色按钮”，实际需求是“这个按钮在深色主题下应如何渲染” - 复用断裂：每个组件都得配一套 --dark 版本，
.input--dark、.nav--dark……改一个主色就得全局搜索替换 - SSR 风险：服务端渲染时若
data-theme未注入，但 HTML 已含class="button--dark"，样式无匹配规则，直接错色或白屏 - PurgeCSS 误删：构建工具可能因该类名未在初始 HTML 中显式出现而删掉对应 CSS
正确做法：用 html[data-theme] 注入变量，BEM 修饰符 只作钩子
主题控制权交给 HTML 属性，BEM 类名只声明“我是什么类型”，颜色由 CSS 变量动态提供。
- JS 切换主题时只改：
document.documentElement.dataset.theme = "dark"，不操作任何 class - CSS 中写：
html[data-theme="dark"] .button--primary { --btn-bg: #333; --btn-text: #fff; } -
.button--primary自身只写：background-color: var(--btn-bg, #007bff);，必须带 fallback - 所有主题相关样式收口到单个
button.css文件里，避免theme-dark.css和theme-light.css分散加载引发覆盖顺序问题
变量重定义容易踩的坑
常见问题不是语法错误，而是变量没在正确作用域生效，或选择器权重失控。
- 只改了
--text-color，漏掉--card-bg或--input-border，导致部分组件仍用亮色值 - 写了
.app--dark .button--primary这种高权重选择器，结果后续加的.button--loading样式被压制 - 用了
body.app--dark而非html[data-theme]，导致prefers-color-scheme: dark媒体查询无法同步，也破坏原生表单控件可访问性 - 嵌套深的组件（如
.card__header .button--primary）没同步加深主题覆盖选择器，变量未被重写
最易忽略的一点：变量 fallback 不只是防 JS 加载失败，更是 SSR 首屏渲染的生命线 —— 没它，用户看到的就是裸色块或不可读文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
