, , ,

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

公開日: 2015/01/06
更新日: 2018/12/26

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

[markdown]
## 経緯

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

> * [Sass・Compass まわりの便利だけど忘れがちな Tips | deadwood](https://www.d-wood.com/blog/2014/09/18_6826.html)
> * [CSS – 君は知っているか、あのCompassのstatsコマンドを！ – Qiita](http://qiita.com/t32k/items/8609ffe0868da3e485a6)

“`prettyprinted
% 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 ではないのでそうなりますよね、ということで確認。

> * [Getting an error when running `compass stats` · Issue #1207 · middleman/middleman](https://github.com/middleman/middleman/issues/1207)

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

## インストール

stylestats で代替します。

> * [t32k/stylestats](https://github.com/t32k/stylestats)

“`prettyprinted
% npm install -g stylestats
“`

## 実行

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

“`prettyprinted
% 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% │
├─────────────────────────────────┼────────────────────────────────────────────┤
:
“`

ありがとうございます。

## 補遺

> * [自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ | HTML5Experts.jp](http://html5experts.jp/t32k/5743/)
> * [「StyleStats」を活用してCSSを評価する、Evaluating CSS─Frontrend Conference | HTML5Experts.jp](https://html5experts.jp/t32k/13504/)
[/markdown]