スコープ付きCSS変数によるコンポーネントレベルのテーマ

コンポーネントテーマのためのスコープ付きCSS変数

CSSカスタムプロパティはDOMツリーを通じて継承されるため、:rootだけでなく任意のレベルで変数をオーバーライドできます。これにより強力なコンポーネントレベルのテーマが可能になります。

基本的なスコーピング

:root {
  --button-bg: #3b82f6;
  --button-text: #ffffff;
  --button-radius: 0.375rem;
}

.button {
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: var(--button-radius);
}

ローカルオーバーライド

<div style="--button-bg: #ef4444; --button-text: #ffffff;">
  <button class="button">Danger</button>
</div>

このラッパー内のボタンは、追加のCSSクラスや詳細度の争いなしに赤を使用します。

カードバリアントパターン

.card {
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: 0.5rem;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}

.card--elevated {
  --card-bg: var(--bg);
  --card-border: transparent;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.card--outlined {
  --card-bg: transparent;
  --card-border: var(--primary);
}

モディファイアクラスに対する利点

従来のBEMモディファイア（.card--blue { background: blue; }）は各バリアントに新しいCSSルールが必要です。変数オーバーライドにより、インラインスタイルや親コンテキストを通じて無限のバリアントを作成でき、追加のCSS出力はありません。

グローバルトークンとの組み合わせ

コンポーネントトークンはプリミティブではなくセマンティックトークンを参照すべきです：

.card {
  --card-bg: var(--surface); /* --gray-100ではなくセマンティック */
}

これにより、コンポーネントバリアントがテーマの切り替えを引き続き尊重します。