1. ホーム
2. web
3. CSSカスタムプロパティ：スケーラブルなスタイル設計戦略

CSSカスタムプロパティ（CSS変数）は、スタイルシートの記述と保守方法を根本的に変えました。SassやLessのプリプロセッサ変数とは異なり、カスタムプロパティは動的で、カスケードと継承に参加し、実行時に変更可能です。本記事では、デザイントークン管理からランタイム操作まで、プロダクションアプリケーションでの戦略的パターンを解説します。

デザイントークン管理

カスタムプロパティはデザイントークンに最適な媒体です。カラー、スペーシング、タイポグラフィのトークンを階層的に整理し、BEM風の命名規則と名前空間で分類します。

:root {
  --color-primary-500: #3b82f6;
  --color-primary-700: #1d4ed8;
  --space-xs: 0.25rem;
  --space-md: 1rem;
  --space-xl: 2rem;
  --font-sans: "Inter", system-ui, sans-serif;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
}

命名規則は--category-property-variantパターンを採用し、トークン名から値の用途が即座に理解できるようにします。これによりデザインツールとの連携も容易になります。

テーマ切り替え

カスタムプロパティにより実行時のテーマ切り替えが非常に簡単になります。:rootにライトテーマを定義し、属性セレクタやメディアクエリで上書きします。

:root {
  --bg: #ffffff;
  --text: #111111;
}
[data-theme="dark"] {
  --bg: #111111;
  --text: #f3f4f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --text: #f3f4f6;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}

transition: background-color 0.3sでテーマ間のスムーズなアニメーションを追加し、ユーザーの選択をlocalStorageに保存することで、ライト、ダーク、ハイコントラストなど複数テーマをコンポーネントスタイルの重複なしで実現できます。

JavaScriptによるランタイム操作

カスタムプロパティの最大の利点の1つは、CSS-in-JSライブラリなしで実行時に値の読み取りと変更ができることです。

const root = document.documentElement;
root.style.setProperty("--spacing", `${userSpacing}px`);
const currentSpacing = getComputedStyle(root).getPropertyValue("--spacing");

これにより、ユーザーが制御するフォントサイズ、アップロード画像に基づく動的カラーテーマ、スクロール位置に応じたアニメーションパラメータなどが実現可能です。

継承パターンとプリプロセッサ連携

カスタムプロパティはDOMツリーをカスケードするため、スタイルの重複なしでコンテキストに応じた上書きが可能です。

.card { --card-padding: 1rem; }
.card.featured { --card-padding: 2rem; }
.card__body { padding: var(--card-padding); }

プリプロセッサ変数はビルド時の定数や数学演算に適しており、カスタムプロパティは実行時の動的値に適しています。これらは補完関係にあります。

パフォーマンスとフォールバック

カスタムプロパティは計算値時に解決されるため、数百のトークンを:rootに定義してもパフォーマンス影響は無視できます。ただし、アニメーションのホットパスでcalc()内のカスタムプロパティを多用する場合は注意が必要です。

古いブラウザ向けには、フォールバック値を併記するプログレッシブエンハンスメントが最も実用的です。

.element {
  color: #333333;
  color: var(--text-color, #333333);
}

CSSカスタムプロパティは、スケーラブルで保守性の高いスタイルシートを構築するための基本的なツールです。実行時の動的値、カスケード、継承での強みを理解し、プリプロセッサ変数と適切に使い分けることが重要です。