君は自分の書いたCSSを本当に理解しているのか？
CSSは非常に簡単な言語だ。セレクタとプロパティと値を宣言するだけである。だが、スパゲッティなコードにならずにメンテナンスしやすく、スケーラブルなCSSを書くことは非常に難しい。
そのため、あなたの書くスタイルシートは時とともに重く、汚いものになっていき、手の施しようがなくなる。そうなると、今度はそれを読み込むWebサイト・アプリに害をもたらすことになってしまう。
そう、Critical Rendering Pathの問題だ。レンダリングをブロックするのはなにもJavaScriptだけではない。CSSもレンダリングをブロックするので、我々はCSSに関しても細心の注意を払わなければならない。
しかし、CSSを書く人にその意識があるのだろうか、疑問だ。前述のとおり、CSSをただ書くこと自体は簡単なため、CSSという言語自体も軽んじられている気がする。
CSSを書くためには自分を厳しく律しなければならず、それはJavaScriptを書くよりも難しいことではないだろうか。なぜなら、CSSはシンプルがゆえに何もできないからである。
CoolなCSSを書くためには先人のベストプラクティスを学ぶ必要があり、下記の記事を参考にすれば良いだろう。
- CSSLint/csslint
- CSS Architecture — Philip Walton
- Code smells in CSS — CSS Wizardry
- SOLID CSS | Blog | Miller Medeiros
このような記事を読んだからといって、すぐさま完璧なCSSを書ける人はいない。だが、近づくことはできる。
自分がどんなCSSを書いているかは数百行程度であれば、何回かスクロールすればある程度は分かるだろう。しかし、最近のWebプロジェクトのCSSは数千行にものぼるのが当たり前だ（中には数万行もあるかもしれない）。しかも、CSSプリプロセッサなどを使っていると、数十ファイルに分かれ一覧することができない。
そこで、私はStyleStatsを作った。StyleStatsはあなたのスタイルシートを解析し、CSSの統計情報を示してくれる。例えば、セレクタの数であったり、プロパティの数であったり、CSS Lintで指摘されるような項目に関してだ。
StyleStatsはNode.jsモジュールなので、Node.jsがインストールされていれば、コマンド1行でインストールできる
npm install -g stylestats使い方は簡単で、stylestatsの引数に解析したいCSSを指定すればよい。
stylestats path/to/stylesheets機能は制限されるが、コマンドラインが苦手なあなたのためにオンラインツールも用意した。
StyleStatsを使えば、何千行、何万行あるスタイルシートであろうとも、瞬時に解析でき、解析から得られる結果はあなたのCSSを書くために役立つ指標となるだろう。
計測できないものは改善できないように、自分の書いたCSSを正確に知ることが重要だ。そして、注意深くその変遷を監視続けることで自分を律するのである。
