2013-08-09

CSS Condense

Sassで書いてると分散しまくるMedia QueriesのブロックをまとめられるCSS圧縮ツールを探している。まずはCSS Condenseというものを見つけた。だいたいの所は単純な空白と改行削除ツールだけど、Media Queriesを始めセレクターの最適化などなかなかアグレッシブな機能がある。Node.jsパッケージだし、grunt-csscというGruntプラグインもあるので導入の敷居は極めて低い。

まだ実践投入はしてないけど、大体期待した通りに動いている。うちくらいの規模で1KB弱減った。--safeオプションを有効にするなら安定しているようでもあるので、

cssc: {
  main: {
    options: {
      lineBreaks: false,
      safe: true
    },
    src: 'styles/style.css', // Uncompressed CSS compiled by Sass
    dest: 'styles/style.min.css'
  }
}

という安定性を重視した形でSassと組み合わせて使ってみようかと考えている。

現時点でのREADME.mdで@mediaブロックをまとめるとCSSが破綻することがあるとはっきりと注意されており、過信は禁物そう。

危険を犯してまとめてもせいぜい1KBくらいしか減らない……という事がわかってしまったので無理にまとめなくても良さそうかなという方向に傾きつつあるけど、Media QueriesのブロックをまとめることによってCSSファイルのパース速度が上がるとかそういう可能性もあるはず。その辺りについて調べつつ他にも良いツールないか探したい。