トークンの命名規則
グローバル、エイリアス、コンポーネント固有という階層でトークン名を構造化します。
「トークンの命名規則」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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（積み重ねた要素間の垂直方向の間隔、medium）なら、コメントがなくても意図が伝わります。一方、s3のような名前では、意味を理解するために外部ドキュメントが必要です。
破壊的変更を避ける
トークンが使われ始めた後の改名は、破壊的変更になります。非推奨エイリアスを使用し、古い名前を残したまま新しいトークンを参照させます。非推奨トークンを削除する前に、利用側へ移行期間を設けます。
ツールによる強制
Style DictionaryのカスタムルールやCIスクリプトで、トークン名をlintします。命名パターンに一致しないトークンは拒否します。自動的に強制することで、システムの成長に伴う命名の揺れを防げます。
チーム間の認識合わせ
正しい名前と誤った名前の例を含む命名ガイドを公開します。システムを拡張する前に短いワークショップを開催し、デザインチームとエンジニアリングチームで規則に合意します。一貫性にはドキュメントだけでなく、共通の理解が必要です。
知識チェック
コンポーネントトークンには、「blue-500」のようなパレット名ではなく、なぜセマンティックな名前を使うべきですか？
概要
category-property-variantパターン、セマンティックな名前、状態サフィックス、名前空間プレフィックスを使った一貫したトークン命名規則により、トークンシステムは予測しやすく自己文書化され、ブランド変更にも強くなります。その結果、コンポーネントコードを壊さずに済みます。
よくある質問
「トークンの命名規則」レッスンは無料ですか？
はい。「トークンの命名規則」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「トークンの命名規則」で何を学びますか？
グローバル、エイリアス、コンポーネント固有という階層でトークン名を構造化します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「トークンの命名規則」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。