CSS変数の命名規則について考える

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

今更ですがCSS変数の命名規則について考えてみます（ググってもあまりまとまった資料が見つからなかったので）。現時点での自分の経験と考えに基づいた内容なので、アドバイスがあればコメントしていただけると嬉しいです。

値の種類ごとにプレフィックスをつける

CSS変数として宣言する機会が最も多いのは色（カラーコード）だと思いますが、高さやフォントの種類などに対して使うこともあります。以下のように命名してしまうと、何についての変数なのか分かりづらくなってしまいます。

アンチパターン

:root {
  --blue: #3d3dff;
  --red: #e7edf3;
  --header: 60px;
}

色なら色で、高さなら高さでまとめてしまった方が分かりやすいと思います。色の変数なら--color-◯◯という形にする、高さの変数なら--height-◯◯とするといった具合です。

✨ベター

:root {
  --color-blue: #3d3dff;
  --color-red: #e7edf3;
  --height-header: 60px;
}

色の変数は抽象的にまとめる

あとから色を調整する可能性がある場合、--color-blueのような変数を使っていると「blueの変数なのに実際は紫色」みたいなことが起きてしまったりします。

プロジェクトによりますが、多くのケースでは「プライマリー」や「セカンダリー」、「エラー」…のように役割ごとの名前をつけた方が管理しやすいと思います。

同じ赤でも--color-redだと「おっ、良い色があるやん」とプロジェクト内で無秩序に使われてしまうかもしれませんが、--color-errorのような名前にしておけば「エラーの部分でのみ使う色なんだな」と伝わります。

✨ベター

:root {
  --color-body: #333; /* 本文のテキスト用 */
  --color-primary: #529fff; /* プライマリー */
  --color-secondary: #3d3dff; /* セカンダリー */
  --color-error: #e7edf3; /* エラー用 */
}

ただし、色自体を変数名に含めた方が分かりやすいこともあります。例えば「グレー」はさまざまな用途で使わるため、かえって「グレー」であることが分かるような名前にした方が実装時に分かりやすかったりします。

:root {
  --color-body: #333; /* 本文用 */
  --color-primary: #529fff; /* プライマリー */
  --color-secondary: #3d3dff; /* セカンダリー */
  --color-error: #e7edf3; /* エラー用 */
  --color-gray: #EFEFEF;
  --color-gray-dark: #EFEFEF; /* 濃いめのグレー */
  --color-gray-light: #888; /* 明るめのグレー */
}

背景色と文字色は分けた方が管理しやすいこともある

色の変数が増えるような場合には、背景色と文字色を区別すると分かりやすいこともあります。

:root {
  --color-gray: #555;
  --background-color-gray: #EFEFEF;
}

一貫性があれば短い書き方も

好みによる部分ですが--background-colorだと見づらいと感じる方もいると思います。僕の場合は文字色なら--c-◯◯、背景色なら--bg-◯◯とするように決めています。

規則を決めて省略形を使う

:root {
  --c-gray: #555;
  --bg-gray: #EFEFEF;
}

グラデーションを変数に入れるときは以下のようにしています。

:root {
  --c-gray: #555;
  --bg-gray: #EFEFEF;
  --bg-gradient-primary: linear-gradient(...);
}

使用する変数はできる限り少なく保つ

変数が増えれば増えるほど色の選択が難しくなります。また、ライトモード <=> ダークモードをCSS変数で切り替えるような場合、使用している色の種類が多いと対応が大変になります。

特にグレーの種類が多いと、ダークとライトの両モードでのコントラストの担保が難しくなるため注意しましょう。