令牌命名约定
使用全局、别名和组件专属这几个命名层级，以层次化方式组织令牌名称。
令牌命名约定 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
命名为何重要
令牌名称不一致时，除非读取令牌的值，否则无法预测其作用。清晰且可预测的命名约定是构建可扩展令牌系统的基础。
类别-属性-变体模式
一种常见模式是：[category]-[property]-[variant]。例如：color-text-primary、color-text-secondary、spacing-inset-sm。每个片段都会逐步缩小含义范围。
语义名称与调色板名称
避免在组件中使用 blue-500 这样的调色板名称。请使用语义名称，例如 color-action-default、color-feedback-error。更换品牌颜色时，语义名称无需更新组件即可继续使用。
状态修饰符
将状态追加到末尾：color-button-bg-default、color-button-bg-hover、color-button-bg-disabled。一致的状态后缀可以让令牌集更容易预测，也更加完整。
刻度命名
请一致地使用 T 恤尺码（xs、sm、md、lg、xl）或数字刻度（100、200……900）。数字刻度允许插入中间值；对于较小的集合，T 恤尺码更易于理解。
命名空间前缀
对于多品牌或多产品系统，请为令牌添加命名空间前缀：brand-a-color-primary 与 brand-b-color-primary。合并令牌集时，命名空间可以防止冲突。
CSS 变量输出
短横线命名法可以直接转换为 CSS 自定义属性：color-text-primary 会变成 --color-text-primary。驼峰式令牌需要转换；短横线命名法令牌则不需要。
将文档纳入命名
好的名称本身就能说明含义：spacing-stack-md（堆叠元素之间的垂直间距，中等）无需注释即可传达用途。像 s3 这样的糟糕名称则需要查阅外部文档才能理解。
避免破坏性变更
令牌投入使用后，重命名就会成为破坏性变更。请使用弃用别名：保留旧名称，但让它引用新令牌。在删除已弃用令牌之前，为使用方提供迁移期。
工具强制执行
使用 Style Dictionary 中的自定义规则或持续集成脚本检查令牌名称。拒绝不符合命名模式的令牌。自动化强制执行可以防止系统扩展后命名逐渐偏离规范。
团队共识
发布包含正确和错误名称示例的命名指南。在系统扩展之前，组织一次简短的研讨会，让设计团队和工程团队就约定达成一致。保持一致需要共同理解，而不仅仅是文档。
知识检查
为什么组件令牌应使用语义名称，而不是“blue-500”之类的调色板名称？
总结
采用类别-属性-变体模式、语义名称、状态后缀和命名空间前缀组成的一致令牌命名规范，可以让令牌系统更易预测、更具自描述性，并能适应品牌变更而不破坏组件代码。
常见问题解答
「令牌命名约定」课时是免费的吗？
是的 — 「令牌命名约定」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「令牌命名约定」这节课中我会学到什么？
使用全局、别名和组件专属这几个命名层级，以层次化方式组织令牌名称。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「令牌命名约定」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。