CSS变量名必须以--开头，因为这是CSS规范强制规定的语法分隔符，用于区分原生属性与自定义属性；--被浏览器解析器识别为“待求值的自定义属性”开关，不加--则声明无效且被忽略。
为什么CSS变量名必须用--开头
因为--是CSS官方为自定义属性预留的唯一无冲突标识符。Sass早占了$，Less早占了@，浏览器解析器在遇到--前缀时，会明确跳过原生CSS校验逻辑，直接当作自定义属性处理——这不是约定俗成，而是CSS规范强制要求的语法分隔机制。
--不是可选前缀，而是解析开关
浏览器引擎（如Blink、Gecko）在解析样式表时，会先按标准CSS属性名做白名单匹配；只有以--开头的键名，才会被识别为“待求值的自定义属性”，进而允许后续用var()引用。不加--，哪怕写成color: var(main-color)，也会报Invalid property name或静默忽略。
命名里能用中文、数字开头，但--不能省
虽然--1、--你好、--_test都合法，但去掉--就彻底失效：
-
:root { --primary: #333; }✅ 可被var(--primary)读取 -
:root { primary: #333; }❌ 这只是无效声明，不进入自定义属性作用域 -
:root { -primary: #333; }❌ 单横线是厂商前缀语法，和自定义属性无关
容易忽略的大小写敏感和作用域陷阱
--HeaderColor和--headercolor是两个完全不同的变量；且--只影响声明侧，引用时var(--HeaderColor)必须严格匹配大小写。另外，--本身不决定作用域——作用域由声明位置决定：:root里声明的是全局，.btn里声明的只在该选择器内生效，但无论在哪声明，--这个前缀都不可少。
立即学习“前端免费学习笔记（深入）”；
