CSS变量应以语义化命名（如--color-primary）、局部作用域定义、合理fallback，并通过CSS优先级而非!important控制覆盖，响应式通过@media重设变量值，命名需对齐设计系统术语。
用 --color-primary 这类变量代替写死的颜色值
组件样式一旦硬编码 #007bff，下游项目想换主题就得全局搜索替换，还容易漏。CSS 变量本质是“可被覆盖的默认配置”，把视觉决策权交给使用者。
实操建议：
- 在组件根选择器（如
.btn）里只用变量，比如background-color: var(--color-primary, #007bff); - 变量名带语义，不用
--blue-500而用--color-primary——后者表达用途，前者只描述色值，换设计系统就失效 - 提供合理的 fallback 值（逗号后的
#007bff），避免变量未定义时样式崩塌 - 不要在
:root里一次性声明所有变量，按组件作用域局部定义更可控，比如.card { --color-border: #e0e0e0; }
避免在组件内部用 !important 锁死变量行为
常见错误是：为了“确保”按钮背景生效，给 var(--color-primary) 加 !important。结果下游项目想覆盖时，必须也加 !important，冲突升级，维护成本翻倍。
真正该做的是靠 CSS 优先级和作用域来保障可控性：
立即学习“前端免费学习笔记（深入）”；
- 组件内所有样式用单一 class（如
.btn）起始，不依赖嵌套深度或标签名，降低外部干扰风险 - 变量只在必要层级设置，比如主题色在
.btn上设，边框圆角在.btn--rounded上设，避免一个变量管到底 - 如果下游发现变量不起作用，大概率是选择器权重不够，而不是变量本身问题——检查是否被更高优先级规则覆盖，而非加
!important
响应式配置用 @media + var() 组合，别写多套变量
有人会为不同屏幕尺寸定义 --color-primary-mobile、--color-primary-desktop，结果组件里一堆条件判断，逻辑分散且难调试。
更直接的做法是让变量值随上下文动态变化：
- 在媒体查询里重设变量，例如：
@media (max-width: 768px) { .btn { --color-primary: #2196f3; } } - 组件内仍用
var(--color-primary)，无需改逻辑，变量自动切换 - 注意：变量作用域是继承的，所以设在父容器比设在
:root更精准，避免跨组件污染 - 慎用 JS 动态 setProperty 修改变量——它绕过了 CSS 自然的层叠机制，容易和媒体查询冲突，调试时看不到真实值来源
变量命名要对齐设计系统，不是程序员自嗨
写 --bg-1、--text-level-2 看似简洁，但设计师给新规范时，你得逐个对照映射；而用 --surface-bg、--text-secondary，名字本身就带约束力。
关键点在于命名反映“角色”，而非“值”或“位置”：
- 颜色类统一用
--color-{role}（primary/success/disabled） - 间距类用
--space-{level}（xs/sm/lg），不叫--margin-8 - 字体类用
--font-size-{purpose}（heading-lg/body-md），不绑定具体像素值 - 变量名一旦对外暴露（比如作为组件 API 文档一部分），改名就是 breaking change——所以一开始就要和设计同学对齐术语，别自己造词
变量不是语法糖，它是组件和使用者之间的契约。契约越清晰（命名、作用域、fallback），扩展时越少意外。最常被忽略的其实是作用域控制——变量设在哪一层，决定了它能被谁改、该由谁负责。
