设计 token 为什么比散落的颜色变量更适合大型前端项目?
从语义、主题、组件和平台映射理解设计 token 的层级,避免把 token 变成另一套难以维护的常量表。
参考答案
设计 token 把颜色、间距、字号、圆角等设计决策命名为可复用的语义变量。组件使用 --color-text-primary 这类语义 token,而不是直接依赖某个灰色色号,主题和品牌变化时只需替换映射。
大型项目通常分为原始值、语义 token 和组件 token。层级太少会让组件耦合原始值,层级太多则会增加理解成本。token 还要定义继承、默认值、暗色主题、对比度和跨端输出规则。
CSS 自定义属性只是实现手段,不会自动保证设计一致性。需要配套命名约定、审查工具、文档和删除策略,避免把一次性组件参数也全部提升为全局 token。