配色を変えるたびに、同じ色コードを何十箇所も直していた。CSS変数を知って、その作業がなくなった

くらしラボのボタンの色を、もう少し落ち着いた緑にしたいと言われた。
直すだけならすぐ終わると思っていた。

CSSファイルを開いて「#4a7c59」で検索したら、37件ヒットした。
ボタンの背景、ボタンのホバー、リンクの色、アイコンの縁、フォーカスの枠線。
同じ色が、まったく関係のない場所にまで散らばっていた。

一つずつ直していくうちに、これは色を変える作業じゃなくて、色が隠れている場所を探す作業だと気づいた。

色は一箇所に書いて、あとは呼ぶだけでよかった

CSS変数（カスタムプロパティ）というものがあるのは知っていた。
使ったことはなかった。
難しそうというより、今のCSSで困っていなかったから触らずにいた。

書き方は思っていたより単純だった。

:root { --color-accent: #4a7c59; }
で一箇所に色を決めておいて、使うところでは
background-color: var(--color-accent);
と書く。

変数の名前の前に付いている二本のハイフンが目印で、これが付いているものは「あとで変わるかもしれない値」の宣言だと分かるようになっている。

直したのは、37箇所ではなく1箇所だった

色を全部変数に置き換えたあと、同じ相談がまた来た。
今度は色コードを検索する必要がなかった。
:rootの一行を書き換えて、保存するだけで済んだ。

やってみて分かったのは、変数は「探す手間」を消すためのものだということだった。
色そのものを覚えていなくても、変数名さえ覚えていれば呼べる。
#4a7c59という並びより、--color-accentという名前のほうが、半年後の自分には親切だった。

色だけじゃなく、間隔にも使えた

慣れてくると、色以外にも使いたくなった。
カードとカードの間の余白、記事の左右の余白、角の丸み。
これも同じように数字がばらけていて、スマホ幅だけ余白を詰めたいときに毎回計算し直していた。

--space-md: 16px;
のように決めておくと、メディアクエリの中で
--space-md: 12px;
と上書きするだけで、そこから先を全部その値で計算し直してくれる。
計算をやり直すのではなく、値を差し替えるだけになった。

効かなかったときにやったこと

最初、変数の値が反映されないことがあった。
原因は綴りの間違いだった。
--color-accenntのように一文字多いだけで、ブラウザは黙って初期値を使う。
エラーは出ない。
気づくまで、CSSが壊れたのかと疑って別のところを探し回っていた。

もう一つ、:rootに書いたつもりが、特定のクラスの中にだけ書いてしまい、外側では効かなかったこともあった。
変数は書いた場所より下の範囲にしか届かない。
全体で使いたい変数は、必ず一番外側の:rootに置く。
これを覚えてからは迷わなくなった。

rem禁止の会社なので、pxのまま使っている

うちのコーディング規約は、フォントサイズをpxで書いてclamp()で伸び縮みさせる方式で、remは使わない。
CSS変数はremでもpxでも、値の種類を選ばないので、規約と衝突しなかった。
--font-size-lead: clamp(15px, 3.5vw, 17px);
のように、clamp()そのものを変数に入れておくこともできる。

37箇所の色コードを検索していた日から、色の相談が来るたびに身構えなくなった。
変えているのは色そのものより、変える場所の数だったんだと思う。