[Front-End General] StyleStats で CSS Selector の数を確認する

middleman を利用しているプロジェクトでは compass stats できなかったので、代替手段を探しました。

Contents

経緯

CSS Selector の数を確認しておこうかな。

% compass stats
NoMethodError on line ["3"] of /Users/****/projects/****/config.rb:
undefined method `zone=' for Time:Class
Run with --trace to see the full backtrace

middleman の config.rb であって、compass の config.rb ではないのでそうなりますよね、ということで確認。

middleman には、特に対応するオプションはなさそう。

インストール

stylestats で代替します。

% npm install -g stylestats

実行

色つきの text table で表示されます。

% stylestats build/css/main.css
 StyleStats!
┌─────────────────────────────────┬────────────────────────────────────────────┐
│ Style Sheets                    │ 1                                          │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Size                            │ 18.1KB                                     │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Data URI Size                   │ 526B                                       │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Ratio of Data URI Size          │ 2.8%                                       │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Rules                           │ 173                                        │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Selectors                       │ 299                                        │
├─────────────────────────────────┼────────────────────────────────────────────┤
│ Simplicity                      │ 57.9%                                      │
├─────────────────────────────────┼────────────────────────────────────────────┤
    :

ありがとうございます。

補遺