webサイトを構築する際に、数多くの背景色や文字色を使用する場合、一覧表を作ってまとめておかないと、後々どれがどの色なのか混乱したり、RGBや16進表記では直感的に分かなかったりして、作業の手が止まってしまうことが多々あります。そんなとき、分かりやすい名称で変数として宣言しておけば、かなり効率良く使い回すことができます。

使い方：個々のエレメントで変数の宣言も可能ですが、多くのエレメントで使い回す場合は「:root 擬似クラス」による変数宣言が便利です。ただし、CSSの変数はまだ実験段階ですので、ブラウザごとの実装や仕様は定まっていません。このサンプルはFirefoxで動作を確認しています。

CSSソース（１）は、「:root 擬似クラス」により、2種類の背景色と2種類の文字色を宣言しています。CSSソース（２）で各エレメントに背景色や文字色を変数で指定しています。

サンプルのCSSソース（１）　:root 擬似クラスによる変数宣言

  :root {
	--main-bg: #cfc;
	--main-bg2: #ccf;
	--main-color: #f00;
	--main-color2: #37d;
	}

サンプルのCSSソース（２）　各エレメント

　/* エレメント１ */
.ele {
	background-color: var(--main-bg);　　/* 背景　薄い緑 */
	color: var(--main-color);　　/* 文字　赤 */
	}
  /* エレメント２ */
.ele2 {
	background-color: var(--main-bg2);　　/* 背景　薄い紫 */
	color: var(--main-color2);　　/* 文字　青 */
	}
  /* エレメント３ */
.ele3 {
	background-color: var(--main-bg2);　　/* 背景　薄い紫 */
	color: var(--main-color);　　/* 文字　赤 */
	}
  /* エレメント４ */
.ele4 {
	background-color: var(--main-bg);　　/* 背景　薄い緑 */
	color: var(--main-color2);　　/* 文字　青 */
	}

サンプル（エレメント１）

サンプル（エレメント２）

サンプル（エレメント３）

サンプル（エレメント４）