プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。 スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleStatsです。

StyleStatsの使い方

手元のスタイルシートで試してみた結果。サイズや使われているセレクタなどが分かります。

URL指定でも使えます。こちらはBootstrapを試したところ。

どの状態がベストであるかはデザイナーによって異なると思いますが、これを日々記録しておくことができればスタイルシートの状態がどう変化しているのかが分かるようになるでしょう。徐々に肥大化したり、メンテナンスしづらくなれば、その要因を調べるのに使えそうです。出力フォーマットはJSON/HTML/Markdown/CSVなどが選べますので、任意のCIツールと絡めても面白そうです。

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

t32k/stylestats