※オレオレルールです
※順次追記・書き直ししながら整形予定

Figmaとかでカラースタイルを作ったり、コンポーネントを作ったり、
CSS（SASS）で変数を作ったり、クラス名をきめたり、
コーディングやプログラミングと同じように、デザインの現場でも、「命名規則」を意識することが多くなってきました。

Sketch以降デザインツールもコンポーネントとか再利用性を意識した機能をもったものが増えてきたので、
自分のメモとしてまとめます。

色は基本的に必ず変数化

色の変数名は、値が変化する可能性を考えてつける

👎（なるべく）避けるパターン

color-red
赤

👍こうする

color-alert
警告

❓なんで？

変数化（スタイル化）するということは、デザインを作っていく中でその変数の値を変更する可能性があるということです。
なのでcolor-redとか赤とか、値を変数名・スタイル名にいれてしまうと、あとで変更したときに、名前と値の辻褄が合わなくなる場合があります。
（CSSを書いた経験があるとよく分かる話）

例外もある

例外的に、色の話でいうと、赤や白とかその色であることをあえて変数名・スタイル名に入れるというケースもあります。
その色であることが、その変数・スタイルにとっての存在意義である場合は、値をそのまま名前に入れる場合もあります。

値の重複を妨げない。（意味のある重複）

👎避けるパターン

赤（#f00）

👍こうする

通知（#f00）
アクセント（#f00）

色などの見た目ではなく、意味で命名する

「名前に値を入れない」という前の話とも関係する話。

例えば、警告として利用する「赤」と、単なるデザインとして「赤」は、仮に同じ色で作ったとしても、用途・意味が違うので、あとで値を分けるということも考えられます。
結果としての見た目ではなく、その意味を捉えた命名をしましょう。

意味での命名がどうしてもう難しい場合は連番

CSSの命名規制はBEMを使っているんですが、
例えば特定のクラスに複数のバリエーション（Modifier）を作る場合、それぞれのバリエーションを意味で命名するのが難しい場合もあります。
（汎用的に使うバリエーションだったりすると、意味付けが複数ある場合もあってなおさら）

その場合は、最後の手段として

.class { /* ... */ }
.class--type-2 { /* ... */ }
.class--type-3 { /* ... */ }

という命名をしています。