CSSのカスタムプロパティ（変数）を「:root」に使用してコーディングを効率化する

CSSのコーディング時に同じ色、同じフォント、同じ文字サイズなど、何度も同じ値を使用する際に個別にクラスを用意してマークアップを行っていくのでも良いのだけれど、THTMLへの追記なくCSSファイルのみで完結できる「カスタムプロパティ（変数）」が非常に便利だったのでメモ。

CSSのカスタムプロパティ（変数）とは

CSSのカスタムプロパティは、CSSの値を事前に変数として登録しておくとこで、各セレクターでの指定時に再利用できる値のこと。
具体的にはルートセレクター（:root）に設定することで全てに適応することが可能となります。

CSS

:root {
	--maincolor: #4790bb;
	--accentcolor: #2a5772;
	--subcolor: #b0d7d5
	--bigsize: 1.8rem;
	--middlesize: 1.4rem;
	--enfont: "Jost", serif;
}

.common__label {
	color: var(--accentcolor);
	font-family: var(--enfont);
	font-size: var(--bigsize);
	font-weight: 700;
}
.common__heading {
	margin: 1rem 0 4rem;
	font-size: var(--middlesize);
}

設定時に「--○○○○」の形式で登録、実行時に「var(--○○○○)」の形式で記載。
変更する際も「:root」の値を変更するだけで一括で変更できるほか、誤って「:root」の値を削除してしまった時のために「フォールバック値（代替値）」の設定も可能です。

CSS

.common__heading {
	margin: 1rem 0 4rem;
	font-size: var(--middlesize, 20px);
}

「var」の第二引数（カンマの後の値）に記載されたものが「フォールバック値」。
カスタムプロパティが空の場合に代わりに適応されます。