Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

masamitsu-konya
転職サイトGreenとTalentBaseのWebデザイナー&フロントエンドエンジニア。 バックエンドもマスターしたれぃ、と勉強中。
http://www.green-japan.com
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
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