CSS变量名必须以--开头，因为这是规范强制要求的语法标识，浏览器解析器仅凭--前缀识别自定义属性，否则直接静默忽略；命名还需首字符非数字、严格区分大小写。
为什么 CSS 变量名必须以 -- 开头
因为这是 CSS 规范硬性规定的语法标识，不是约定俗成的风格偏好。浏览器解析器靠 -- 前缀来区分「自定义属性」和「标准 CSS 属性」，没这个前缀就直接忽略——既不报错，也不生效。
-- 是解析器的“开关信号”
CSS 引擎在解析声明时，会先检查属性名是否匹配 --[a-zA-Z0-9_-]+ 这个模式。只有匹配才当作自定义属性处理；否则一律按标准属性对待，而标准属性里根本不存在 primary-color 或 font-size-base 这种名字，结果就是静默丢弃。
-
--primary-color: #007bff→ 被识别为自定义属性，可被var(--primary-color)引用 -
primary-color: #007bff→ 解析失败，等价于写了个无效属性，完全无效果 -
-primary-color: #007bff（单破折号）→ 同样不匹配，被忽略
大小写敏感 + 不能数字开头，也是解析规则的一部分
除了 --，命名还受两层限制：首字符不能是数字，且严格区分大小写。这不是为了“好看”，而是避免与未来可能新增的标准属性冲突，也防止因拼写差异导致变量意外失效。
-
--Color和--color是两个独立变量，互不影响 -
--16px-font是非法名，浏览器拒绝解析（即使你写了也不会报错，但值不会注册） -
--_spacing合法（下划线允许），但不符合多数团队的命名规范，容易和 BEM 类名混淆
和 Sass/SCSS 变量的 $ 前缀不是一回事
有人会类比 Sass 的 $primary-color，但这是编译期行为；CSS 变量是运行时原生特性，-- 是浏览器引擎层面的语法标记，不可省略、不可替换、不可配置。试图用 JS 动态创建不带 -- 的属性（如 el.style.setProperty('color', 'red')）不会产生自定义属性效果。
最容易被忽略的一点：这个前缀不是“写给人看的注释”，它是 CSS 解析流水线里第一个分拣闸门——过不去，后面所有逻辑（继承、计算、var() 查找）都压根不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
