295
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

サイトが大きくなればなるほど未使用セレクタとか増えちゃって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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
295
Help us understand the problem. What are the problem?