2014-06-18
StyleStats を使えるようになるまでのメモ
t32k さん作の StyleStats は、CSS の統計情報を出力する Node Package です。
詳細については以下を参照してください。
- StyleStats — MOL
- 自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ | HTML5Experts.jp
- t32k/stylestats · GitHub
- StyleStats – Useful tool to collect CSS statistics （オンライン版 StyleStats）
公式ページの手順でインストールしたのですが、何度やってもコマンドが見つからないと言われて使えませんでした。
コマンドが見つからない原因が分からなかったので、まずは初期状態に戻そうと、以下のページを参考に Node.js 関連を一旦削除してみることにしました。
- Mac OS X から Node.js をアンインストールする方法 – SONICJAM Developerz Blog
- node.js – How do I uninstall nodejs installed from pkg (Mac OS X)? – Stack Overflow
- Mac OS X uninstall script for packaged install of node.js
削除後に Homebrew 経由で Node.js を入れて、StyleStats をインストールしたところちゃんとコマンドが通りました。
解決したのはよかったんですが、何が原因だったのかは判明せず。
公式の Node.js インストーラーでインストールしたのを忘れてて、 Homebrew で Node.js をインストールしてしまったからなのかも。
途中途中で確認してみればよかったですね。
このブログで現在使用している CSS の解析結果は以下の通り。
微妙に違うだけの色指定があったりするので、近いうちに再度調整をしないとなと思っています。
※ 記事中では崩れていますが、ターミナル上では表としてちゃんと表示されます
$ stylestats http://www.understandard.net/wp-content/themes/2013/style.css
StyleStats!
┌─────────────────────────────────┬──────────────────┐
│ Style Sheets │ 1 │
├─────────────────────────────────┼──────────────────┤
│ Size │ 8.0KB │
├─────────────────────────────────┼──────────────────┤
│ Data URI Size │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Rules │ 118 │
├─────────────────────────────────┼──────────────────┤
│ Selectors │ 194 │
├─────────────────────────────────┼──────────────────┤
│ Simplicity │ 60.8% │
├─────────────────────────────────┼──────────────────┤
│ Most Identifier │ 3 │
├─────────────────────────────────┼──────────────────┤
│ Most Identifier Selector │ .global li a │
├─────────────────────────────────┼──────────────────┤
│ Lowest Cohesion │ 9 │
├─────────────────────────────────┼──────────────────┤
│ Lowest Cohesion Selector │ .logo a │
├─────────────────────────────────┼──────────────────┤
│ Total Unique Font Sizes │ 7 │
├─────────────────────────────────┼──────────────────┤
│ Unique Font Size │ .75em │
│ │ 1em │
│ │ 1.5em │
│ │ 2em │
│ │ 75% │
│ │ 80% │
│ │ 100% │
├─────────────────────────────────┼──────────────────┤
│ Total Unique Colors │ 15 │
├─────────────────────────────────┼──────────────────┤
│ Unique Color │ #000000 │
│ │ #0086B3 │
│ │ #009926 │
│ │ #009999 │
│ │ #026EB7 │
│ │ #333333 │
│ │ #445588 │
│ │ #66665B │
│ │ #888888 │
│ │ #990000 │
│ │ #AAAAAA │
│ │ #DD1144 │
│ │ #FFFFFF │
│ │ NAVY │
│ │ TEAL │
├─────────────────────────────────┼──────────────────┤
│ ID Selectors │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Universal Selectors │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Unqualified Attribute Selectors │ 12 │
├─────────────────────────────────┼──────────────────┤
│ JavaScript Specific Selectors │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Important Keywords │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Float Properties │ 0 │
├─────────────────────────────────┼──────────────────┤
│ Properties Count │ color: 25 │
│ │ margin: 23 │
│ │ padding: 23 │
│ │ display: 22 │
│ │ font-size: 13 │
│ │ background: 12 │
│ │ border: 10 │
│ │ font-weight: 7 │
│ │ margin-top: 7 │
│ │ margin-bottom: 6 │
├─────────────────────────────────┼──────────────────┤
│ Media Queries │ 1 │
└─────────────────────────────────┴──────────────────┘StyleStats が無事インストールできたあとに試した ver. 4.1.0 では、$ stylestats www.understandard.net/wp-content/themes/2013/style.css のようにすると Style Sheets の値が0になってしまいましたが、ver. 4.1.1 で修正されました。
Twitter での発言を拾ってくれ、修正対応をしてくれた @1000ch さんありがとうございます。
StyleStats の Grunt、gulp プラグインもあるようです。