自分が作っているCSSが良いか悪いか判断してくれるツールや指標はありませんか？

Question

自分が作っているCSSが良いか悪いか判断したいです。

例）セレクタの階層が深くない方がパフォーマンス的にもメンテナンス性にも優れていることは分かります。
しかし、どこがどれほど深くなっているのか、探すのは大変です。
・一目でどこのセレクタの階層が深いのかが分かる
・どの程度まで階層を浅くすればいいのかが分かる（何か指標となる深さがあって、その指標を超えているか否かが分かる）

例）繰り返し出現する要素（複数のCSSファイルで上書きが繰り返されている等の要素）がどれくらい出現し、どれくらい減らせばいいかが分かる

などが一目で分かるツールがあれば嬉しいですが、
そもそも上に挙げた例で判断するのが正しいか間違っているかも分かりません。

自分が使っているCSSが良いか悪いか、どうやって判断するのが良いのでしょうか？

Answer 1

有名なところでは下記のようなWebツールがあります。

CSS書く人なら絶対入れとけのgrunt-contrib-csslintについて紹介するよ - Qiitta

ただ、CSSはしっかとしたポリシーに基づいてきちんと設計しないと、容易に肥大化し破綻してしまうので、ツールによる診断と並行して、設計の方法論も身に着ける必要があると思います。

最近では、書籍やWeb上の情報が少しずつ充実して来たので、ぜひご活用ください。

特に下記ページは、コンパクトに良くまとまっているのでオススメです。

破綻しにくいCSS設計の法則 15 - Qiita
昨今のCSS設計事情からみるCSS設計のあり方とは | HTML5Experts.jp
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG

以上、ご参考になれば幸いです。

Comments

[nae_stage]

回答ありがとうございます。
教えていただいたツールをまだ動かせていないのですが、インストールして使ってみようと思います。
また、設計の方法論に関するリンクもありがとうございます。
まだ勉強不足で、知らないテクニックがたくさんあることが分かりました。

Answer 2

CSSの不要な宣言やinvalidな宣言をある程度検出できるツールならあります。

Style Validator
http://style-validator.herokuapp.com/

作者さんのスライドがありますので、参考にしていただければと。
http://www.slideshare.net/TakeharuIgari/japanese-style-validatorhtml5etcstudy20151125

Comments

[nae_stage]

大変有益な情報をありがとうございます！
早速使ってみると、エラーと警告がたくさん検出されました(笑)
検証するだけでなく、かなり勉強になるツールだと思いました。
先の回答のツールと併用して使ってみようと思います。