概要

CSSが本格的に“設計”の領域に進化し始めたのは、**カスタムプロパティ（CSS変数）**が登場してからだ。
単なる色指定やマージンの定数化ではない。
スタイルの「意味」と「関係性」を抽象化し、制御可能にする手段としてのCSS変数は、現代のフロントエンド設計に欠かせない。

この記事では、CSS変数の構文・スコープ・使い所・計算式への応用・テーマ切り替え対応まで、設計視点で使いこなすためのノウハウを凝縮して解説する。

対象環境

CSS Custom Properties（CSS Variables）対応ブラウザ  
（IEを除く主要ブラウザすべて）

基本構文

:root {
  --primary-color: #007aff;
  --spacing-unit: 1rem;
}

.button {
  background: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

--変数名 で定義
var(--変数名) で参照
:root はグローバルスコープ（CSS全体に適用）

スコープ（継承）を意識した設計

.card {
  --card-padding: 1.5rem;
  padding: var(--card-padding);
}

.card-small {
  --card-padding: 0.75rem;
}

→ 親にスコープを限定することで、コンポーネントごとの微調整が可能

デフォルト値の指定（フォールバック対応）

color: var(--headline-color, #333);

→ 変数が未定義の場合は #333 を使用
→ フェイルセーフで堅牢なスタイル

計算と連携：`calc()` と組み合わせてダイナミックに

:root {
  --base-size: 1rem;
}

.box {
  padding: calc(var(--base-size) * 2);
  font-size: calc(var(--base-size) + 0.5rem);
}

→ 数式に組み込むことで、設計の一貫性を保ったまま柔軟なUIが構築可能

状態切り替え：ダークモードやテーマ変更への応用

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

<body data-theme="dark">
  <div class="container">Dark Theme Active</div>
</body>

→ 属性切り替えで全体テーマの即時切り替えが可能に。JavaScriptも不要。

実務例：ユーティリティ変数セットの構築

:root {
  /* カラー */
  --color-primary: #007aff;
  --color-danger: #ff3b30;

  /* タイポグラフィ */
  --font-base: 1rem;
  --font-heading: 1.5rem;

  /* スペーシング */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

→ このような「設計ルール」を変数で抽象化することで、コードの意味が伝わり、変更にも強くなる

よくあるミスと対策

❌ SCSSの変数と混同する

$primary-color: #007aff;

→ CSS変数とは別物。SCSS変数は事前にコンパイルされるが、CSS変数はランタイムで評価される。

→ ✅ 使い分けるポイント：

SCSS → 計算やミックスインの補助
CSS変数 → DOMスコープと状態に応じた柔軟な変更

❌ IE対応が必要な場合に使ってしまう

→ IEはCSS変数を一切サポートしない。プロダクト要件に応じてPolyfillやSCSSにフォールバックすべき

結語

CSS変数は、単なる見た目の定数化にとどまらない。
それはスタイルの意味と構造をコード化し、再利用とスケーラビリティを担保するための言語的な機能である。

見た目を変えるだけでなく、意味を抽象化して操作できるという点で、CSSは進化している。

設計の主語を「色」から「意味」に。
CSS変数はその最初の一歩となる。