cssに外からパラメータを渡して表示を切り替える #CSS

最近、cssに外から任意の値を与えて表示を弄れるという事に気付いたので、備忘録として。

cssには変数の仕組みがあって、定義を纏める事が出来る。

test.css

:root {
  --color: red;
}

div {
  color: white;
  background-color: var(--color)
}

これを、htmlから使うと

test1.html


<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <div>赤</div>
</body>

</html>

こうなる

でもこれ、css内で変数として使いまわせるってだけじゃなくて、html側から直接スタイル指定して、変数の上書きも出来る
つまり以下の様なhtmlであれば

test2.html


<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <div>赤</div>
  <div style="--color: blue;">青</div>
  <div style="--color: gold;">金</div>
</body>

</html>

こうなる

この仕組みの何が嬉しいかというと、例えば、ユーザー毎に画面デザインを変えたい様な場合に、直接htmlでスタイルを弄ってしまうのではなく、あくまでデザインの指定はcssに寄せたままで値だけを切り替えるのを、htmlとcss間のやり取りだけで実現出来る所。
直接スタイルを弄るだと（<div style="background-color: blue;">みたいな形）、同じスタイルの指定がcssとhtmlで重複してしまうけれど、値だけ渡せれば、デザインはcssで決定するという原則を、ある程度守り続ける事が出来る。
さらにこの実現において、javascriptを通さずにいられる。
デザインはデザインの問題として完結出来るなら、それに越したことは無いので、こうやって閉じ込めてしまえると、気持ちがいい。

rails/haml/scssのアプリで動的に表示を切り替えるのに、大変お世話になりました。