CSSOとgrunt-csso

読書の秋、ご勉学の方はいかがでしょうか。 I’m your @t32k.

今日はCSSO (CSS Optimizer) – A CSS minimizer unlike othersの紹介だ。前回のCSSCombは単純にプロパティのソートをしてくれるものだったが、今回のはminimizerだ。

普段はSassの:compressed出力で最後デプロイしてるんだけど、もっとマシなものはないかなーと特には探してはないけど、@cssradarパイセンがCSSOがいいって言ったとか言わないとかあったので調べてみた。

ちなみにSassの:compressedはこんな感じで出力しているらしい。

Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id17 

改行とか空白とか色の値変換ですかね。まぁ特にそんな凝ったことはしてない模様。

CSSOとYUI Compressor

CSSのminimizerとして有名というか古くからあるのはYUI Compressorですね。JavaScriptのminimizerとして有名ですがCSSも縮小化できます。んで、それよりもCSSOは良いってゆうもんだから、どのへんがいいのよ？と思って、CSSOの縮小化ルールを試してみた。

ちなみに、YUI Compressor’s CSS minifierのルールに関してはここに書いてあった。

どちらもオンラインで試せるデモツールがあったので、 CSSOのマニュアルに書いてあるサンプルを両方のツール試してみた。

ちなみに訳してみた。

基本的な変換

  • ホワイトスペースの削除
  • 最後尾の ‘;’ の削除
  • コメントの削除
  • 不正な @charset と @import 宣言の削除
  • color プロパティの縮小化
  • ゼロの縮小化
  • 複数行文字列の縮小化
  • font-weight プロパティの縮小化

構造的な最適化

  • 同一セレクタブロックのマージ
  • ブロック内の同一プロパティのマージ
  • 上書きされたプロパティの削除
  • 上書きされたショートハンドプロパティの削除
  • 繰り返されているプロパティの削除
  • ブロックの部分的なマージ
  • ブロックの部分的な分割
  • 空のルールセット、ルールの削除
  • margin と padding プロパティの縮小化

太字になっているのがCSSOでできて、YUI Comoressorでは縮小化できなかったもの。colorプロパティの縮小化はYUIも一部できるとこはあったのですが、CSSOのほうが優秀でした。

CSSOが他のminimizerとどのへんがunlikeなのかというと、上の対応表を見てもらうと分かるように構造的な最適化（Structural optimization）が出来るということですね。他のminimizerは基本的にホワイトスペースの削除といったものがベースですが、CSSOはそれだけでなくスタイルブロックのマージや分割といったアグレッシブなこともしてくれます。

さて、ほんとにこのCSSOはイケてるのか試してみましょう。

このブログのCSSをminifyしてみた結果が以下。

元が14Kあるのに対して、CSSOでmiifyしたほうが8,979 byteで、YUIの9,342 byteよりも400byteほど軽くなっています。うん、素敵！

grunt-csso

んで、CSSOはCSSCombみたいにテキストエディタでのプラグインが配布されていない、くまったです(･ω･)。毎回コマンドライン打つのもめんぞい。そんなところに最近、同僚さんがgruntエバンジェリストなので、ついついそそのかされてgrunt-cssoなるものを作ってみました。これで、Gruntfile(grunt.js)に設定しておけば、簡単にminifyできますね。