CSSのカスタムプロパティをちゃんと学び直そう

CSSのカスタムプロパティって何

別名CSS変数と言い、CSSのプロパティとして利用できる特定の値を再利用するための仕組み。
一般的なプログラミング言語における「変数」と同様に考えられる。

使い方

プロパティ名として--空始まる文字列を、値にはCSSとして有効な値を指定する。

:root {
  --main-text-color: #3d3d3d;
}

こうして定義されたカスタムプロパティは、var()関数を使って参照することができる。

:where(html, body) {
  color: var(--main-text-color);
}

カスタムプロパティの継承

カスタムプロパティは親から継承される。そのため、以下の例においてh1セレクタ内で--main-text-colorを参照すると、その値は:rootセレクタで定義されている値を指す。

:root {
  --main-text-color: #3d3d3d;
}

:where(html, body) {
  color: var(--main-text-color);
}

h1 {
  color: var(--main-text-color);
}

上記の例でh1セレクタ内で--main-text-colorを再定義していると、その値はh1セレクタ内で定義されている値を指す。
下のCSSを適用すると、h1要素のテキストは赤（red）になる。

ただし、h1セレクタ内で定義した--main-text-colorのスコープはh1セレクタ内に留まる。
なので、例えばh2やspanセレクタなどでは:rootセレクタ内で定義された値を参照する。

:root {
  --main-text-color: #3d3d3d;
}

:where(html, body) {
  color: var(--main-text-color);
}

h1 {
  --main-text-color: red;
  color: var(--main-text-color);
}

代替値

カスタムプロパティは代替値を定義しておくことができる。

:root {
  --main-text-color: #3d3d3d;
}

:where(html, body) {
  color: var(--main-text-color, black);
}

このようなCSSが定義されている時に--main-text-colorを定義している行がコメントアウトされたとしよう。
その時、:where(html, body)セレクタ内で参照しようとする--main-text-colorはHTML文書全体で存在しないので、代替値としてblackが適用される。

カスタムプロパティの命名の規則や考え方

我らがcatnose先生が一つ記事にしてくれている。

CSS変数の命名規則について考える zenn.dev

また、この記事が参考になりそう。

Mastering CSS Custom Properties: Best Practices for Efficient Styling dev.to

Introduction Mastering CSS Custom Properties: Best Practices for Efficient Styling"...

一応GPTに要約してもらった。

カスタムプロパティの命名規則と考え方

一貫性を保つ: 命名規則を一貫して使用することで、コードの可読性と保守性が向上します。例えば、色に関するプロパティは--color-で始めるなど。

意味を持たせる: プロパティ名はその役割や用途を明確に示すべきです。例: --primary-colorや--font-size-largeなど。

スコープを考慮する: グローバルに使用するプロパティは:rootで定義し、特定のコンポーネント内でのみ使用するプロパティはそのコンポーネント内で定義します。例: :root { --global-padding: 1rem; }や.button { --button-padding: 0.5rem; }。

プレフィックスを使用する: プロジェクトやコンポーネントごとにプレフィックスを付けることで、名前の衝突を避けることができます。例: --projectname-componentname-propertyname。

ドキュメント化: カスタムプロパティの一覧とその用途をドキュメント化しておくと、チーム全体での理解が深まります。