LoginSignup
52

More than 5 years have passed since last update.

未使用CSSセレクタを見つけて削除する方法〜2種比較〜【2019年版】

Posted at

サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃうらしい。
そんな時に、ページごとに使っていないセレクタを見つけて削除したい。

あとはページをリニューアルするときにフルスタックではなく、徐々に綺麗にするときに使えそう。

Chromeの仕様が変わり、開発者ツールの「Audits」項目から調べられなくなったので、
2点の方法を紹介。

  • 開発者ツールの「Coverage」機能
  • Unused CSS

開発者ツールの「Coverage」機能

Macの場合は、ショートカットが「Command + Option + I」
windowsの場合は「Ctrl + Shift + I」 で開く

デベロッパーツール上の開発者ツール右上に表示されている「・・・」が縦に並んだ設定ボタンをクリックし
「More tools」から「Coverage」を選択

image.png

click the record button ● to start capturing coverage.を押す。

image.png

以下の画像のようにCSSファイルを確認すると、要素の左側に緑色と赤色の線が表示される。
image.png

緑色の線で表示されている要素 閲覧中のページで使用している要素
赤色の線で表示されている要素 閲覧中のページで使用していない要素

「Coverage」を使用すればJavaScriptも同様にチェックできる。

Unused CSS

image.png

リンクにURLをぶっこむだけ。
image.png

紐づくリンクも一緒に検索されてしまうのが少し面倒。

未使用CSSセレクタの削除

あとは リンク記事 を参考に削除する。

まだ削除していないでの削除したら更新します。

結果

JSも検証できてページ単位で見るならChromeのデベロッパーツールが良さそう。

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
52