CSS極めたい猫「擬似クラス:root」ってなに？

この記事はCSSを勉強し直したい筆者が纏め直しつつ、CSSをより便利に書けるようになりたい方に向けた記事になります。

様々なCSSが使用できるようになってきた中で、カスタムプロパティ（設定用）としてよく活用される「:root」について振り返りたいです。
以下、茶番も兼ねていますが御覧ください。

CSSを書けるようになりたて猫とCSS極めたい猫
まとめ：カスタムプロパティはSassで慣れていたけど:rootに設定で良いのかな

CSSを書けるようになりたて猫とCSS極めたい猫

ほてまる

カチャカチャ…スッターン！！ほて、CSS書き終えたニャ！！

るり

どれどれ…、ほてちゃんが書いたCSSはこれかミャ？

/** 特定の場所の設定をしたニャ **/
.cats_box {
  color: #fff;
  background: #000;
  padding: 10px 20px;
}
.ruri_box {
  color: #00ff00;
  background: #000;
  padding: 10px 20px;
}
.hotemaru_box {
  color: #ff0000;
  background: #000;
  padding: 10px 20px;
}

るり

おや？「background」と「padding」が同じ値だミャ。これは統一したい箇所かみゃ？

ほてまる

ほて、各要素だけ文字色を変えたいにゃ。背景色とパディングについてはデザイナーから統一するようにご指定受けたニャ～。

るり

にゃるぺそ。それならこういう書き方はどうだみゃ？

/** カスタムプロパティとして指定するミャ **/
:root {
  --main-bg-color: #000;
  --box-padding: 10px 20px;
}

/** 特定の場所の設定をしたニャ **/
.cats_box {
  color: #fff;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}
.ruri_box {
  color: #00ff00;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}
.hotemaru_box {
  color: #ff0000;
  background: var(--main-bg-color);
  padding: var(--box-padding);
}

ほてまる

ほてええぇぇぇええ？！何だニャこの「:root」って！！！しかも各要素のプロパティに謎の値が入ってるニャ！！

るり

:rootに設定した各コードを呼び出すことによって、統一する箇所を一括管理できるミャ。これによって余白や色を変えたいというときに、各箇所を一つ一つ編集しなければならない、ということがなくなるニャ。