CSS変数・SASS変数で管理している色の命名規則

2025年4月27日

悩めるコーダー

色の候補が枯渇した…

悩めるコーダー

どこで使用している色なのかわからなくなった…

CSS変数またはSASS（SCSS）変数を用いて色を管理する際、命名規則に悩んだことはないでしょうか？

変数で色を管理する際、適切な命名規則がなければ、プロジェクトが大きくなるにつれてコードが煩雑化し、作業効率も低下してしまいます。

この記事では、そのような状況を避けるため、コーダー兼デザイナーでもある筆者が多くのWebサイト制作を通じて改良を重ねてきた、命名規則を紹介します。

できる限り汎用性が高くなるよう設計したので悩んでいる方はぜひ一度お試しください。

今回紹介する命名規則に至るまでの経緯

筆者はこれまでいくつかの命名規則を試してきました。

まずは、これまでの試行例とそれぞれの問題点について解説していきます。

変数を使用し始めた頃は、下記のようにデザインの配色の基本であるメイン、ベース、アクセントを採用しました。

:root {
  --color-base: #333;
  --color-main: #007b43;
  --color-accent: #897520;
}

しかし、この命名規則は下記の問題があり瞬く間に不採用となりました。

次に候補がなくなることを防ぐため、色名をそのまま変数名にし、同系色は連番で対応するという下記のような命名規則を採用しました。

:root {
  --color-black: #333;
  --color-black2: #2c2c2c;
  --color-white: #fff;
}

こちら当初は上手くいっていましたが、規模の大きいサイトや公開後の更新作業時などに、下記のような問題があり不採用となりました。

試行例2の問題を解決するため下記のように使用箇所に合わせた接頭辞を付けることにしました。

:root {
  --color-text: #333;
  --color-bg: #fff;
}

ですが、こちらも下記のような理由で不採用となりました。

そしてこれらの問題点を解決して設計したのがこれから紹介する命名規則になります。

先ほどの経緯を踏まえて設計した命名規則がcolor-{接頭辞}--{明暗}という形になります。

具体的には下記のようにCSS変数を定義します。（SASS変数を使用している方は--部分を$に置き換えてください。）

:root {
  --color-contrast: #fff;
  --color-contrast--dark: #f3f3f3;
}

ポイントは下記の通りです。

命名規則で使用する接頭辞は以下のように設定します。

接頭辞	使用箇所
base	主に文字色として使用します。
contrast	主に背景色として使用します。
main	メインカラーとして使用される色に使用します。
accent	メインとは独立して目立たせたい色に使用します。
separate	ボーダーや区切り線などコンテンツ同士を分割する色に使用します。
primary	メインカラーの次に主要な色に使用します。
secondary	プライマリーの次に主要な色に使用します。使用頻度は少ないです。
tertiary	セカンダリーの次に主要な色に使用します。使用頻度は少ないです。
success	フォームの入力が成功したことを示す場合など何か成功したことを示す箇所の色に使用します。基本的には緑系統の色が使われます。
warning	警告や注意喚起を示す色に使用します。基本的には黄色やオレンジ系統の色が使われます。
error	エラーを示す色に使用します。基本的には赤系統の色が使われます。
inactive	非活性状態やプレースホルダーなど、ユーザーが操作できない状態を示す色に使用します。
link	リンクを示す色に使用します。基本的にはメインやアクセントカラーを使うことが多いですが、リンク用に別途色が設定されている際に使用します。

base、contrast、main、accent、separateは基本的にどのサイトでも使用するかと思います。

また、success、warning、error、inactive、linkはUIデザインが優れているサイトでは設定する機会が多いです。特にお問い合わせフォームのようなユーザーとのやり取りが発生する箇所で活躍します。

明暗は、各色に対して異なる明るさを表現するために使用します。特に背景色はセクションの区切りに明暗を変えることが多いため使用機会が多いかと思います。

下記のように定義することで今のところは対応できています。