アラタナエンジニアブログ

aratana Engineer's Blog

CSSのメンテナンスに疲れてませんか?CSS解析ツール「StyleStats」がいい感じ

花粉症でマスクの出費が絶えず毎日おにぎりを食べてる岡本です。
この時期は花粉症辛いですね。
朝起きたとき風邪ひいたかな?って思いますもんね。


さて、そんな花粉が飛びまくる季節なわけですが、
先日サイバーエージェントで開催された「Frontrend conference THE FINAL」に参加してきました。

そうです。初参加でFINALです。


Frontrendとは、サイバーエージェントが主催しているフロントエンドエンジニア向けのイベントです。
JSやCSS、webのトレンドなど多岐に渡る盛りだくさんイベントです。

今回始めて参加したわけですがめちゃくちゃいいイベントでした。
500人収容のセミナールームで200人を超えるキャンセル待ちが出るなどすごい人気でしたね。


イベント自体はJavascriptトラックとCSSトラックに分かれて開催されました。

Javascriptトラックでは最近話題のFacebookJavascriptライブラリReactのセッションや、リアクティブプログラミング、ServiceWorker、Javascriptのテストのセッションなど最近のフロントエンドエンジニアは興味をそそりまくる内容でした。

Reactについて語ってる高見さんです。


一方CSSトラックはShadowDOMやWeb Components、Polymer、InlineLayoutなどなど。

その中でも気になったセッションを今回紹介します。

Evaluating CSSというセッションでトークされてました石本光司さんの「StyleStats」が気になったのでご紹介です。



タイトルでも書いてますが、日々のCSSのメンテって正直しんどいですよね・・・
特に複数人で開発するようなプロダクトになると尚更・・・


そこで登場するのが「StyleStats」

そうです。
CSS解析をしてくれるツールなのです。

早速インストール。

StyleStatsをインストール

$ npm install -g stylestats

できた。

次に解析したいCSSファイルを指定して解析します。
今回準備したCSSは以下です。

#wrapper {
  margin: 0;
  padding: 0;
}
#contents {
  padding: 20px;
}
#contents li.block {
  margin: 0 20px;
  float: left;
}
.selected [type=text] {
  color: red;
}
p {
  font-size: 20px;
  color: black;
}

以上がサンプルです。

では早速StyleStats!!

StyleStatsを実行

stylestatsの引数にCSSファイルのパスを入力すれば解析してくれます。
複数ファイルや、リモートファイルにも対応してます)

$ stylestats path/test.css

複数指定する場合

$ stylestats path/test.css path/test.css 

リモートファイルの場合

$ stylestats http://xxx/xxx/test.css


すると解析結果が即座に出力されます。
以下が結果です。

┌─────────────────────────────────┬────────────────────┐
│ Style Sheets │ 1 │
├─────────────────────────────────┼────────────────────┤
│ Size │ 207B │
├─────────────────────────────────┼────────────────────┤
│ Data URI Size │ 0 │
├─────────────────────────────────┼────────────────────┤
│ Gzipped Size │ 149B │
├─────────────────────────────────┼────────────────────┤
│ Rules │ 5 │
├─────────────────────────────────┼────────────────────┤
│ Selectors │ 5 │
├─────────────────────────────────┼────────────────────┤
│ Simplicity │ 100.0% │
├─────────────────────────────────┼────────────────────┤
│ Most Identifier │ 2 │
├─────────────────────────────────┼────────────────────┤
│ Most Identifier Selector │ #contents li.block │
├─────────────────────────────────┼────────────────────┤
│ Lowest Cohesion │ 2 │
├─────────────────────────────────┼────────────────────┤
│ Lowest Cohesion Selector │ #wrapper │
├─────────────────────────────────┼────────────────────┤
│ Total Unique Font Sizes │ 1 │
├─────────────────────────────────┼────────────────────┤
│ Unique Font Sizes │ 20px │
├─────────────────────────────────┼────────────────────┤
│ Total Unique Font Families │ 0 │
├─────────────────────────────────┼────────────────────┤
│ Unique Font Families │ N/A │
├─────────────────────────────────┼────────────────────┤
│ Total Unique Colors │ 2 │
├─────────────────────────────────┼────────────────────┤
│ Unique Colors │ BLACK │
│ │ RED │
├─────────────────────────────────┼────────────────────┤
│ ID Selectors │ 3 │
├─────────────────────────────────┼────────────────────┤
│ Universal Selectors │ 0 │
├─────────────────────────────────┼────────────────────┤
│ Unqualified Attribute Selectors │ 1 │
├─────────────────────────────────┼────────────────────┤
│ JavaScript Specific Selectors │ 0 │
├─────────────────────────────────┼────────────────────┤
│ Important Keywords │ 0 │
├─────────────────────────────────┼────────────────────┤
│ Float Properties │ 1 │
├─────────────────────────────────┼────────────────────┤
│ Properties Count │ margin: 2 │
│ │ padding: 2 │
│ │ color: 2 │
│ │ float: 1 │
│ │ font-size: 1 │
├─────────────────────────────────┼────────────────────┤
│ Media Queries │ 0 │
└─────────────────────────────────┴────────────────────┘


おおおおお〜〜〜〜!
こんなに簡単に解析してくれた!

Node.js製なのでインストールしてしまえばすぐぱぱっと使えちゃうのも便利です。

この各指標は何かというと、CSS Lintをベースとした指標だそうです。
CSS Lintについては以下を参考にしてください。
参考:CSS Lint
参考:CSSLintのRulesの超訳


CSSはJavasriptなどと違ってバグが起きたり動かないなどのことがないので、必要のないコードを残してしまったり、非効率なコードを書いたりと本当にメンテナンスが大変です。
もうスパゲッティにつぐスパゲッティ。
スパゲッティを通り越してもはや何者なのかわからない。

そんな状態にならない為にも日々のリファクタリングが必要です。
StyleStatsを使って解析し、無駄は何なのか、適切なコードはどれなのか日々のクオリティチェックが欠かせません。
このツールを駆使すれば今このCSSがどういう状態なのかすぐに把握することができます。


よりイケてるCSSを構築するためには欠かせないツールです。

今日もイケてるCSSを書きます!

ちなみになんですが、インストールせずにウェブ上でもstylestatsを使うことできます。
こちらも便利なので使ってみてください!



下記が石本さんが書いているStyleStatsの解説です。