CSS変数の効果的な使用方法

:root {
  --primary-color: #16A34A;
  --secondary-color: #15803D;
  --text-color: #333333;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

/* グローバルスコープ */
:root {
  --theme-color: blue;
}

/* 特定のコンポーネントでの上書き */
.card {
  --theme-color: green;
}

/* 変数の使用 */
.element {
  color: var(--theme-color);
}

.element {
  /* 変数が未定義の場合は#333が使用される */
  color: var(--undefined-color, #333);
}

:root {
  --container-width: 1200px;
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%;
    --font-size: 14px;
  }
}

.container {
  max-width: var(--container-width);
  font-size: var(--font-size);
}

/* ライトモード（デフォルト） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333333;
    --text-color: #ffffff;
  }
}

/* または、クラスベースでの切り替え */
.dark-theme {
  --bg-color: #333333;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

:root {
  --base-size: 16px;
  --scale-ratio: 1.2;
}

h1 { font-size: calc(var(--base-size) * var(--scale-ratio) * 2); }
h2 { font-size: calc(var(--base-size) * var(--scale-ratio) * 1.5); }
h3 { font-size: calc(var(--base-size) * var(--scale-ratio)); }

// CSS変数の取得
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--primary-color');

// CSS変数の設定
root.style.setProperty('--primary-color', '#ff0000');

/* 推奨される命名パターン */
--component-name-property-state
--button-background-hover
--card-padding-large

:root {
  /* カラー */
  --color-primary: #16A34A;
  --color-secondary: #15803D;
  
  /* スペーシング */
  --spacing-small: 4px;
  --spacing-medium: 8px;
  --spacing-large: 16px;
  
  /* タイポグラフィ */
  --font-size-base: 16px;
  --font-size-large: 24px;
  --font-weight-bold: 700;
}

.card {
  --card-padding: 16px;
  --card-border-radius: 8px;
  
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
}