プログラマーにとって過去のコードに手を加えていくことで負の資産を生み出すように、デザイナーにとってもスタイルシートの度重なる修正は負の資産を生み出していきます。その結果、全体のバランスが崩れたり、リファクタリングもできずに破綻したりします。 スタイルシートの場合、プログラミングのようにUnit Testを書いてリファクタリングしたりできないのが難点です。そこで使ってみたいのがuncss、利用していないスタイルシート設定を洗い出してくれるソフトウェアです。

UnCSSのインストール

インストールはnpmコマンドでできます。

npm install -g uncss

ヘルプです。ファイルまたはURLを渡します。

$ uncss --help

  Usage: uncss [options] <file or url, ...>
	 e.g. uncss http://getbootstrap.com/examples/jumbotron/ > stylesheet.css

  Options:

    -h, --help                          output usage information
    -V, --version                       output the version number
    -i, --ignore <selector , ...>        Do not remove given selectors
    -m, --media <media_query , ...>      Process additional media queries
    -C, --csspath <path>                Relative path where the CSS files are located
    -s, --stylesheets <file , ...>       Specify additional stylesheets to process
    -S, --ignoreSheets <selector , ...>  Do not include specified stylesheets
    -r, --raw <string>                  Pass in a raw string of CSS
    -t, --timeout <milliseconds>        Wait for JS evaluation
    -H, --htmlroot <folder>             Absolute paths' root location

例えばこんな感じ。使われていないスタイルシートが出力されます。

メディアクエリを追加したりすることもできますので、レスポンシブなサイトで使うと便利そうです。なおPhantomJSを使っていますので、JavaScriptを使っているサイトでもチェックできるのが便利です。 UnCSSはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

giakki/uncss</media_query>