CSS Variables と CSS の未来

ここ数年にリリースされたウェブブラウザは W3C の仕様に従いつつ、実験的に独自の要素を実装して表現の幅を広げようとしています。CSS まわりでは WebKit がリードしているのではないでしょうか。マルチカラムや複数背景画像のような CSS3 にあるものから、反射やマスクのような変わったものまで実に様々です。

最近 WebKit のほうにも実装され、今月の CSS WG で草案化する可能性がある仕様で CSS Variables というのがあります。その名のとおり「CSS で変数を扱う」というもので、値を一元管理出来るようになります。詳しくは withD のこちらの記事が参考になりますが、サンプルコードを書くとこんなかんじです。

@variables {
	companyTheme: #069
	highlight: #ffc;
	PageTitleSize: 18px;
	SubheaderSize: 14px;
}
h1 {
	background: var(companyTheme);
	font-size: var(SubheaderSize);
}
h2 {
	font-size: var(SubheaderSize);
}
strong{
	background: var(highlight);
}

@variables内で変数と値を定義しておくことで、メンテナンス性を上げています。こうした一元管理の試みは以前から行われており、PHPで行うテクニックは広く知られています。CSS Variables が実装されれば、面倒な準備をせずにそのまま書き込めるので便利ですね。

期待が高まる CSS Variables ですが、反対意見も出ています。W3C の CSS WG にも参加している Bert Bos氏が最近 Why “variables” in CSS are harmful というエッセーを公開しました。彼は CSS がどんどんプログラミング言語のような扱いになっていることを危惧しており、CSS が CSS として行わればならないこと (タイポグラフィやレイアウト) にフォーカスするべきではないかと指摘。上級者には便利な拡張に思える CSS Variables だが、初心者を遠ざけてしまう恐れがあるのではないかと考えているそうです。

今、CSS を使いこなしている方の多くは、他の人が作った CSS ファイルを参考にしてスキルアップをした方が多いと思います。CSS Variables が入ることで、コードをみて覚えるというのが少し大変にはなるでしょうね。また、CSS Variables のような値の管理を CMS 側で行うというやり方も考えられると思います。

Bos氏が書いていることで同意出来る点はあります。
CSS3 セレクタは複雑ではありますが、大変便利だと思いますし、使う機会は今度ますます増えてくると思います。ただ、CSS でわざわざアニメーションをする必要があるのかどうか疑問だったりします。CSS で何でも出来るようにするよりかは CSS は CSS であって欲しいなという思いがあります。

しかしながら、CSS Variables は必要ではないとは思いません。工夫すればシンプルに CSS を管理することは出来る部分はありますが、どうしても数百行のコードになってしまいます。CSS でサイトを構築する敷居は低くなってきましたが、それとは逆にメンテナンスが年々難しくなってきているような気がします。ドキュメンテーションを作るというのもひとつの解決方法ですが、CSS Variables がメンテナンス性を上げるひとつの答えになるのではないでしょうか。

ブラウザにおける CSS の解釈の違いを理解するのも CSS を学習する上で大変な部分ではありますが、CSS の基礎を学ぶのも今は何とも難しいなという気がします。先に紹介したセレクタもそうですし、属性も様々。もちろん、ひとつのプログラミング言語を覚えるのに比べたら簡単でしょうけど、初心者が中級者への道筋が険しいものになっているような気がします。