未使用のCSSをオンラインで削除
HTMLとCSSを貼り付けると、ページ上の何かにマッチするルールだけを残します。
未使用のCSSをオンラインで削除
スタイルシートを、それを使うマークアップと突き合わせ、何にもマッチしないルールをすべて取り除く。この考え方を広めたのがPurgeCSSです。このページはそれをブラウザー内で行います。未使用CSS削除ツールをHTML + CSSタブで開き、ページとスタイルシートを貼り付けるだけで、データがパソコンの外に出ることはありません。
残るもの
- HTML内の要素にマッチするセレクターを少なくとも1つ持つルール。
.btn:hoverや.icon::beforeのように状態や疑似要素を含むセレクターで、その部分を除いた要素が存在するもの。- 常に残すに入れたもの。クラス名、
#の有無を問わないID、スラッシュで囲んだパターン。 - ブラウザーが解析できないセレクター。推測はしません。
@font-faceは常に、@keyframesは残したルールかインラインスタイルがそのアニメーションを参照している間。
見えないクラス
貼り付けたHTMLはスナップショットです。ページの動作中に、スクリプトがクラスを追加します。開いたメニュー、アクティブなスライド、固定ヘッダー、入力エラーなどです。スナップショットにはそのクラスを持つ要素がないので、そのルールは未使用に見えます。そうしたクラスは常に残すに入れてください。フレームワークやページビルダーのクラスは共通の接頭辞を持つことが多く、/^is-/や/^elementor-/のようなパターン1つでまとめて指定できます。代わりにChromeでページを記録できるなら、カバレッジJSONをCSSに変換のページが、実行時に追加されるクラスも含めて、ブラウザーが実際に適用したものを把握します。
例
グリッド、ナビゲーションバー、2種類のボタンスタイルしか使わないBootstrapベースのランディングページでも、フレームワーク全体を読み込んでいます。ページとスタイルシートを貼り付け、showやcollapsingのようにナビゲーションバーが切り替えるクラスを常に残すに加えれば、フレームワークの大部分が取り除かれます。削除したセレクターの一覧には消えたものが表示されるので、残すべきだったクラスを見つけるにはここがいちばん早い場所です。
オンラインか、ビルドか
1回きりのページ、テンプレート、メールなら、何かをインストールするよりこのページのほうが手早く済みます。更新が続くサイトなら、マークアップが変わるたびにCSSが整理し直されるよう、ビルドでPurgeCSSを実行してください：npx purgecss --css css/style.css --content index.html --output dist/css/。どちらの場合も、元のスタイルシートを置き換える前に、すべての画面幅でページを確認してください。