css变量命名须以--开头且避开js保留字，采用语义化前缀分层命名，var()调用必须设默认值防失效。
变量名必须以--开头，且不能用JavaScript保留字
CSS变量本质是自定义属性，语法强制要求以--开头，比如--primary-color合法，primary-color或color-primary直接无效。更隐蔽的坑是：不能撞上JS保留字——哪怕你只在CSS里用，浏览器解析时也会报错。例如--class、--function、--default都会触发SyntaxError，因为它们属于JS保留关键字列表。命名前快速扫一眼常见保留字（如const、export、let）能省去调试时间。
语义优先，避免带具体值的名称
写--blue-500看似方便对应设计系统，但一旦设计改了色值或想换主题，这个变量名就成谎言。真正可维护的写法是--color-primary或--color-accent，它表达意图而非实现。同理，--spacing-2不如--space-sm，后者不绑定具体像素值，后续通过:root重定义就能全局调整。团队协作时，这类命名还能减少沟通成本——看到--border-radius-lg就知道该用在哪，不用翻文档查数值。
层级和作用域要靠前缀显式表达
变量不是孤立存在的，它天然有作用范围。全局通用的颜色、间距、圆角建议统一加--color-、--space-、--radius-前缀；组件级变量则用--button-bg、--card-shadow这种带上下文的命名。不要依赖注释说明“这个变量只在header里用”，而应让名字自己说话。另外，:root里定义的变量默认全局可用，但若某个组件需要覆盖（比如深色模式下按钮背景变暗），直接在组件选择器里重写--button-bg即可，无需新起名字——CSS级联机制会自动处理作用域优先级。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
var()调用时必须配默认值防断链
变量未定义时，var(--missing)会退化为unset，导致样式失效（比如color: var(--text-primary)变成透明文字）。保险做法是始终提供兜底：color: var(--text-primary, #333)。注意默认值只能是CSS合法值，不能是另一个var()嵌套。另外，计算场景如calc(var(--space-md, 12px) * 2)也要给默认值，否则整个表达式会失效。这点容易被忽略，尤其在媒体查询中动态修改变量时，旧环境可能还没加载新值。
实际项目里，命名混乱往往不是技术问题，而是缺乏约束。把--前缀、语义化、前缀分层、var()兜底这四条写进团队CSS规范，比事后重构省力十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
