最近のClean CSSには@importで参照しているCSSを読み込んでインライン展開する機能がある。この機能を使うとGitやBowerを使ってNormalize.cssやTwitter Bootstrapをローカルにダウンロードし(、リネームし)ておいて……などとしなくて済むので、CSSライブラリーの管理の手間がだいぶ減る。
デフォルトで有効になっているので、普通に書くだけで展開される。
@import url('http://necolas.github.io/normalize.css/latest/normalize.css');は、
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{...と展開され、更に圧縮される。Normalize.cssのように最新版を参照するURLが用意されていれば、バージョンの管理も不要になる。
Clean CSSには他に相対パスを解決する仕組みなども用意されているので、CSSにおける静的リソースのほぼ全てをうまいこと管理できるようになっている。
ただし//で始まるURLでCSSを参照すると例外を吐いて落ちるバグがあったり、すべての@importディレクティブが処理されることには注意が必要かも。前者は致命的っぽいけどWindows限定のような気もする(ドライブレター！)。後者は処理して欲しくない@importディレクティブが必要なことは稀なので、あまりハマらない。
処理して欲しくない@importディレクティブというのは、例えばUAで振り分けて返すCSSを変えているようなURLを参照しているケース。具体的にはGoogle FontsのCSSとか。最近のChromeに対してはたまにWOFF2も参照するCSSを返したり、古いブラウザーに対しては忘れた方が良さそうなフォーマットを参照するCSSを返す。Clean CSSに対してはTTFを参照するCSSを返してしまう。
このような些細な問題はあるけど、ライブラリー管理にBower等を使ってディレクトリーやファイルのレイアウトに四苦八苦するくらいならClean CSSをうまく使ってやった方が良い。