はじめに
はじめましてKonbuGXと申します。
ブラウザの開発者ツールのカバレッジを利用すれば
Webページ内の利用している・していないセレクタがわかります。
そのため、cssファイルの不要なセレクタを削除し
ファイルサイズを小さくすることができます。
利用方法を下記に記載いたします。
1.ブラウザでWebページを表示
対象となるページをブラウザに表示させます。
2.開発者ツールを表示
対象となるページで開発者ツールを表示します。
Windowsだと「F12」もしくは「ctr + shift + I」で表示し
Macだと「Commnd + Option + I」で表示します。
すると下記のようなものが開きます。
3.開発者ツールから「カバレッジ」を選択
開発者ツール上部から「︙」->「その他のツール」->「カバレッジ」と
選択してカバレッジを表示させます。
4.「カバレッジ」の●を押下
「カバレッジ」の●を押下すると下記のように利用しているcssファイルが表示されます。
「利用状況の可視化」の赤いバーは未使用で青いバーは使用中の量です
5.「カバレッジ」のタイプが「CSS」の行を選択
「カバレッジ」のタイプが「CSS」の行を選択します。
すると、使用・未使用のバーが表示されているCSSファイルの内容が表示されます。
これで不要なセレクタを見つけることができます。
注意点
・使用、未使用のセレクタがわかるのは表示されているWebページのみ
使用、未使用のセレクタがわかるのは表示されているWebページのみです。
別のhtmlファイルでは使用しているが表示されているWebページで
使用していない場合では未使用と判定されます。
なので、cssファイルを利用しているhtmlファイルをすべて表示し
削除していいセレクタかどうか見極める必要があります。
・使用、未使用の判定は正確ではない
コメントや「＠media()」など消したくないものまで未使用と
判定されるので消していいのかどうか確認する必要があります。
感想
業務で触るcssファイルは膨大な量なので
そこから不要なセレクタを見つけるのを手作業では絶対したくないです。
なので、完全ではないものの使用・未使用のセレクタがすぐわかるのは
楽で良いと思いました。