CSS変数だけでテーマ設計する

このサイトのテーマは Sass などのプリプロセッサを使わず、素のCSS変数だけで組んでいます。

変数は「決定」を1か所に集める道具

:root {
  --color-text: #24262b;
  --color-accent: #2e6e5e;   /* リンク・見出しのアクセント */
  --color-bg: #ffffff;
  --space-block: 1.5rem;     /* ブロック要素間の標準余白 */
  --content-width: 44rem;
}

個々のルールでは色や余白を直接書かず、必ず変数を参照します。配色を変えたくなったら :root を書き換えるだけで、サイト全体が追随します。

運用ルールを3つだけ決める

1. 色の直書き禁止。 例外は白と透明のみ。
2. 変数名は役割で付ける（--color-teal ではなく --color-accent）。色を変えても名前が嘘にならないように。
3. 変数の追加は「2回目に使うとき」。 1回しか使わない値を変数にしない。

ビルドがないことの価値

プリプロセッサを外すと、style.css を直接編集すればその場で反映されます。小さなサイトでは「ビルドの待ち時間ゼロ・環境構築ゼロ」の快適さが、ネストや mixin の便利さに勝ちます。

ブラウザの開発者ツールで変数の値をその場で書き換えて配色を試せるのも、素のCSS変数ならではの利点です。