CSS変数（カスタムプロパティ）が便利だった

/* どこでも使用可能 */:root{--text-color:#444;}/* セレクタ内で使用可能 */.hoge{--hoge-color:red;}

:root{--text-color:#444;--margin:margin;}.hoge{color:var(--text-color);}/* プロパティ名を変数にすることはできない */.fuga{var(--margin):30px;}

/* --text-color が定義されていなければ #444 */.hoge{color:var(--text-color,#444);}/* --text-color が定義されていなければ --text-color2 が適用 */.hoge{color:var(--text-color,var(--text-color2));}/* --text-color2 は適用されない */.hoge{color:var(--text-color,--text-color2);}

:root{--gradient-start-color:#e66465;--gradient-end-color:#9198e5;--bg-gradient:linear-gradient(var(--gradient-start-color),var(--gradient-end-color));}.foo{background:var(--bg-gradient);}

<p>黒い文字</p><divclass="red"><p>赤い文字</p></div><divclass="blue"><p>青い文字</p></div><div><p>黒い文字</p></div>

:root{--text-color:#444;}body{color:var(--text-color);}.red{--text-color:red;}.blue{--text-color:blue;}

:root{--text-color:#444;--bg-color:#fff;}/* ダークモードの時 */@media(prefers-color-scheme:dark){:root{--text-color:#fefefe;--bg-color:#333;}}body{color:var(--text-color);background-color:var(--bg-color);}

<divid="hoge"></div>

:root{--text-color:#444;}#hoge{color:var(--text-color);}

consthoge=document.getElementById('hoge')// hogeの計算済みスタイルを取得 consthogeStyle=getComputedStyle(hoge);// CSS 変数 --text-color の値の取得consthogeStyleVal=hogeStyle.getPropertyValue('--text-color');console.log(hogeStyleVal);// #444

<divid="hoge"></div>

:root{--text-color:#444;}#hoge{color:var(--text-color);}

consthoge=document.getElementById('hoge')hoge.style.setProperty('--text-color','red');