Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。

Clairvoyanceの使い方

Clairvoyanceを実行します。

$ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html

HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。

レポートです。使われているクラスは緑色になります。

使われていない設定は赤く表示されます。

ClairvoyanceではAPIも用意されています。実際には静的なHTMLファイルに対してチェックすることは多くないと思いますので、プログラマブルに外部からデータを取得しつつチェックするような仕組みを自作するのがいいのではないでしょうか。

Clairvoyanceはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

sinsoku/clairvoyance: Clairvoyance provides a way to measure code coverage for CSS