CSS Variablesとコーディングフロー
お盆休み中ではあるのですが、なぜかほとんど休日出勤状態になっており、気分転換にメモ書き。
CSS Variables
元ネタは、
あたり。あと、CSS Variablesの本家のページのはてブのページも要参考。直近では、PHPを使っているとはいえ、[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリスというのも出てきているわけで、CSSがプログラム言語みたいになっているなーという印象。
コーディングフローの利便性
僕が上記の記事を読んでいて思い出したのは、HTML×CSSのプレビュー型とアーキテクト型コーディングフローという以前自分で書いた記事のこと。CSS Variablesが使えれば、これ簡単にできるよな、と。
例えば、functions.cssなんていうファイルを作っておき、そこでカラーやフォントサイズ、グリッドシステムのサイトであればmargin、paddingまでを変数としてあらかじめ書いておき、あとは本体のCSSで呼び出すだけ。HTMLの構造を維持したまま、CSSをうまく使いまわせますよね。いわゆるコンポーネントCSSというやつ。
また、メンテナンス性がすごく高くなると思います。もし、そのファイル名をfunctions.cssなどでWeb制作者の間で暗黙の了解を作っておけば、ユーザCSSも作りやすくなるのではないでしょうか。
ということをツラツラと考えていると、couldの長谷川さんも引用していますが、
CSS が CSS として行わればならないこと (タイポグラフィやレイアウト) にフォーカスするべきではないかと指摘。上級者には便利な拡張に思える CSS Variables だが、初心者を遠ざけてしまう恐れがあるのではないかと考えているそうです。
というところがやっぱり課題なのかなとは思います。ただ、初心者を遠ざけるというのは分かる気もするのですが、変数を書かないとCSSを組めないというわけでもないので（プログラムで変数が使えないとかなり痛いことにはなるでしょうけど）、個人的にはこの動きは賛成かなとは思っています。
