中長期的にメンテナンスしやすく、誰でも分かりやすいスタイルシートを維持するというのはとても大変なことです。しかし、それを実現するためには幾つかのルールがあります。それがThe Specificity Graph（特異性グラフ）です。

例えばCSSの中でIDを使わない、セレクタをネストしないといったようなルールがあるようですが、それを現状のスタイルシートを使って指摘してくれるのがCSS Reporterです。

CSS Reporterの使い方

CSS Reporterはローカルのスタイルシートファイルを指定して実行します。そうすると9000番でWebサーバが立ち上がります。

$ css-reporter "glob/to/css/files/**/*.css"

Bootstrapのスタイルシートを解析してみた結果です。

特異性によってポイントが出るようです。

グラフだけでなく、細かな解析結果も出ます。

使われているカラーリングの一覧。

CSS Reporterを使うことで現状のスタイルシートにおける問題点を可視化し、改善ができるようになります。また、メディアクエリやカラーリングなどの解析もできるので自分たちのスタイルシートについて深く知りたい時に便利なソフトウェアと言えるでしょう。

CSS Reporterはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

springload/css-reporter