複雑になる前に使いたいですね… 日々運用が続いた結果、スタイルシートの中が荒れてしまい、もはやメンテナンスが大変と言った声は良く聞きます。ゼロベースで作っても良いかも知れませんが、まずは現状を適切に把握すべきでしょう。 どういった設定があって、どういった色設定があるのか…それらを知ることで改善するアイディアも湧くかも知れません。そのためのツールがStylestatsです。

Stylestatsのインストール

インストールはnpmで一発インストールできます。

$ npm install -g stylestats

これで準備完了です。

Stylestatsの使い方

Stylestatsはコマンドの引数としてスタイルシートファイルを指定するだけです。

$ stylestats path/to/stylesheet.css

オプションは以下のようになっています。

$ stylestats -h

  Usage: stylestats [options] <file ...>

  Options:

    -h, --help                output usage information
    -V, --version             output the version number
    -c, --config [path]       Path and name of the incoming JSON file.
    -e, --extension [format]  Specify the format to convert. <json |csv>
    -s, --simple              Show compact style's log.

ルール、セレクタ、ユニークカラー、フォントサイズ、インポータント指定、メディアクエリなど様々な情報が取得できます。これによりスタイルシートの第三者的評価ができれば、その改善についても検討できるようになるはずです。

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

t32k/stylestats