LoginSignup
289

More than 5 years have passed since last update.

未使用CSSセレクタを見つけて削除する方法

Last updated at Posted at 2013-10-28

サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃったりしませんか?
そんな時に、ページごとに使っていないセレクタを見つけて削除したい。
いろいろ未使用セレクタを見つけるツールがあるみたいですが今回はChromeの開発ツールを使いました。

未使用CSSセレクタの見つけ方

audits.png
Choromeの開発ツールのAuditsをクリックし、
Runボタンをクリック。

Run結果.png
Remove unused CSS rulesを開くと
そのページで使われていないCSSセレクタが一覧で表示されます。

未使用CSSセレクタの削除

あとは以下の手順で削除する。

  1. 他のページのviewやjavascriptでそのセレクタが使われていないか調査
  2. 使われていない場合は削除する

自分の環境だとRails使っているので
grepかけて他で使ってないかチェックしてから削除します。

grep -r 'fb_hidden' app/views/ | grep -v svn
grep -r 'fb_hidden' public/javascripts/ | grep -v svn

どちらでも使われていない場合はそのセレクタを削除する。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
289