CSS变量定义与使用详解

本文深入解析了CSS颜色变量（自定义属性）的正确声明与使用规范，强调必须通过`:root`伪类全局定义、严格遵循`--`前缀和命名规则，并强制要求为`var()`引用提供fallback值以避免样式静默失效；同时详解了响应式场景下如何在`@media`中重定义变量实现暗色模式切换，指出IE等旧浏览器的兼容性限制及PostCSS降级方案，并提醒开发者在React/Vue和Tailwind等现代生态中集成时的关键注意事项——真正影响项目稳定性的往往不是底层机制，而是声明位置、拼写、fallback缺失和媒体查询覆盖这四个高频陷阱。

在 :root 里声明 CSS 颜色变量，不是随便写个 -- 就能用

必须用 :root（而非 html 或其他选择器）才能确保全局可访问；-- 开头的自定义属性名区分大小写，且不能含空格、运算符或中文。常见错误是写成 color-primary: #333（漏了两个短横）或 --color primary（带空格），浏览器直接忽略。

• :root 是伪类，代表文档根元素（通常是 html），它的作用域天然覆盖整个文档
• 声明位置建议统一放在