CSS Custom Property / Variables の使い方を考える

gistfile1.md

CSS Custom Property / Variables の使い方を考える

ref: http://dev.w3.org/csswg/css-variables/

今や CSS は生成するものだし変数とかいらない

普通に変数を定義して参照するだけなら Sass でも使えばいいとおもう。

プリプロセッサ使わなくてすむと利点がある場合

ウェブアプリとかで色定義やらを別ファイルに分離しておけば、ユーザはそのファイルを差し替えるだけで簡単にカラースキームだけを変更することができる。 たとえば

:root {
  var-colorscheme-name: 'monokai';
  var-color-background: #272822;
  var-color-color: #ffffff;
  var-color-keyword: #52daec;
  ...
}

のような感じで。 色定義以上に細かい設定の場合は JSON の方がいい。 色とか url() とか、CSS として意味のある値だとエディタの補助が効いたりしてわずかに意味がありそう。

オレオレ接頭辞として使う

spec の note にも書いてある。 現在は、CSS での指定を JavaScript で取得するためには

• 自力で CSS をパース
• JavaScript API を用意しておいてユーザに指定してもらう

のどちらかの方法をとる必要がある。 自力でパースすると遅いし、スタイルシートが同一オリジンでない場合や動的に追加される場合などに対応しにくい。 JS で指定させるのは DRY でない。

特に、CSS の機能の polyfill を作るときには有用で、カスタムプロパティが使えるようになれば、CSS 側では var-flex: auto; とか var-flow-from: content; とかかけば、それを JavaScript 側からも取得できる。