安全定义全局主题色需在:root中单独声明--primary-color，避免被高优先级选择器覆盖；深色模式应拆分变量并用class控制；局部重置须在容器上直接声明变量；fallback仅在变量未定义时生效，需双层保障；动态更新变量后需注意重绘问题。
如何在 :root 中安全定义全局主题色
直接在 :root 里写 --primary-color: #007bff 看似简单，但容易被后续未加限制的选择器意外覆盖。关键不是“能不能写”，而是“怎么写才不会被绕过”。:root 的优先级其实和普通类选择器一样（都是 specificity 0,0,1），一旦遇到 .theme-dark .btn 这类组合选择器，就可能输。
- 推荐用最低干扰方式：只在
:root声明，不带任何其他选择器前缀，也不嵌套 - 避免在
body或html上重复声明同名变量——这会制造隐式覆盖链 - 如果项目有深色模式开关，把主题变量拆成两组更可控：
--primary-light和--primary-dark，再用color-scheme或 class 控制哪组生效
怎样让某个区域「彻底重置」主题色变量
不是靠 !important，也不是靠增加选择器权重，而是利用 CSS 变量的继承与作用域特性。局部重置的本质是：在目标容器上重新声明变量，且确保其子元素能继承到新值。
- 必须在目标容器（比如
.legacy-section）上直接设置变量，不能只写在子元素里 - 写法要明确：用
.legacy-section { --primary-color: #333; }，而不是.legacy-section * { --primary-color: #333; }（后者低效且不可靠） - 注意层级穿透：如果子元素用了
all: unset或all: revert，它会清掉继承来的变量，得额外补回
为什么 var(--primary-color, #000) 的 fallback 不总生效
fallback 只在变量“未定义”或“值为空”时触发，而不是“被覆盖为无效值”时。比如你在 :root 设了 --primary-color: invalid;，再用 var(--primary-color, #000)，结果仍是 invalid，不会降级。
- 调试技巧：用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')查真实值，别只看 DevTools 里显示的“computed”颜色 - 真正安全的 fallback 写法是双层保障：
color: var(--primary-color, #007bff); color: var(--primary-color);（第二行覆盖第一行的 fallback，但仅当变量有效时才起作用） - 构建时可借助 PostCSS 插件自动注入 fallback，避免手写遗漏
使用 CSS 变量做主题切换时最常漏掉的兼容点
不是 IE 兼容性（它本来就不支持），而是动态更新变量后，某些 CSS 特性不会自动重绘，比如 border-color 在伪元素中、或 background 里的渐变色 stops。
立即学习“前端免费学习笔记（深入）”；
-
::before/::after中的变量更新后，部分浏览器（尤其是 Safari 15.6–16.4）需要强制触发重排，例如改一下transform: translateZ(0) - 如果变量用于
@keyframes，动画开始前必须已存在有效值；运行中修改变量不会影响正在播放的动画 - 媒体查询里不能直接引用变量（
@media (prefers-color-scheme: var(--scheme))是非法语法），得靠 JS 检测后切 class
变量本身没状态，重置只是换了个继承源头——真正难的是理清哪些地方依赖了变量、哪些地方偷偷绕过了它。多用 DevTools 的“Computed”面板点开“Custom Properties”，比猜靠谱得多。
