必须用:root声明css全局变量，因其是唯一被浏览器认可、覆盖整个文档树的全局作用域锚点，确保所有后代元素（含伪元素、svg）可继承，且在ssr、主题切换及跨框架场景中稳定可靠。
直接在 :root 里定义语义化变量并全局引用 var(--xxx)，是唯一能真正实现“改一处、全站变”的方案；其他方式（比如 Sass 变量、硬编码 HEX、组件内重定义）都会在主题切换或协作时翻车。
为什么 :root 必须是第一声明位置，且不能重复定义？
CSS 变量按解析顺序覆盖：后声明的同名变量会覆盖前面的。如果第三方库（如 Tailwind 的 @layer base）或某个组件 CSS 在你的主题文件之前加载，它的 :root 声明就会压掉你定义的 --primary，导致 JS 修改无效或页面初始色不对。
- 所有颜色变量必须放在项目主 CSS 文件最顶部，
:root块只出现一次 - 不要在
.theme-dark这类 class 内写:root—— 它不会生效，正确写法是.theme-dark :root { --primary: #2563eb; } - 用
getComputedStyle(document.documentElement).getPropertyValue('--primary')调试，确认返回值不是空字符串或inherit - 构建工具（如 Vite、Webpack）要检查 CSS 注入顺序，确保你的
variables.css是第一个import或link
怎么命名才能避免协作时互相覆盖或漏切？
按语义分层，而不是按色值或设计师给的 Sketch 色板编号。例如 --color-primary 指“主操作色”，不是“蓝色 #007bff”；它在浅色模式下可能是蓝，在深色模式下可以是青，但语义不变。
- 基础组：
--color-primary、--color-success、--color-warning - 中性组：
--color-text-primary、--color-bg-surface、--color-border-divider - 状态组：
--color-primary-hover、--color-primary-disabled（建议用 HSL 动态生成，而非独立变量） - 绝对避免：
--blue-500、--color-main-blue、--primary-color（短横线缺失易拼错）
伪元素、SVG、表单控件这些地方为什么总漏改？
它们的颜色往往不显式声明，而是继承或由浏览器默认样式控制。一旦没显式用 var()，主题切换时就卡在旧值上。
-
::before/::after的background-color、color、border-color全部要写var(--color-primary) - SVG 图标必须加
fill: var(--color-primary); stroke: var(--color-primary);，内联 SVG 尤其容易忘 -
input:focus、select:disabled、button:active等状态样式，每个都要查一遍是否用了变量 - 第三方 UI 库（如 Ant Design）需确认是否启用 CSS 变量支持；否则得用
:where(.ant-btn) { color: var(--color-primary); }强制接管
JS 动态换肤时最容易踩的三个坑
不是 setProperty 不工作，而是变量名、作用域、fallback 三者配合出错，浏览器静默失败，连 console 都不报。
- 变量名必须完全一致：
--color-primary和--primary-color是两个变量，拼错一个字母就失效 - 别用
var(--color-primary, #007bff)当兜底——只有变量未定义时 fallback 才触发；如果变量已定义但值为空字符串，它不会回退 - 批量切换主题时，用对象一次性注入：
Object.entries(theme).forEach(([k, v]) => doc.documentElement.style.setProperty(k, v))，比逐个 setProperty 更可靠 - 服务端渲染（SSR）场景下，
必须在首屏 HTML 中预置，否则 JS 加载前会闪白底黑字
真正麻烦的不是定义变量，而是让每一处颜色都“认得”这个变量——包括那些你以为“反正会继承”的地方。每次新增组件，第一件事不是写样式，而是检查它的 color、background、border、fill 是否都挂上了 var()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
