4

困りごと

php や html や css を書いて作業をしていたときのことです.

html の中で,レイアウトを変えようと思って,<div class="hoge"></div>table に変更しました.

それに伴って CSS の中での

div.hoge {
  text-align: center;
}

というような指定は不要になるわけです.

html や php のコードを編集して大幅に書き換えると,それに伴って不要なCSS指定がたくさん発生します.

それを自動で検出することはできないでしょうか?

試したこと

開発者ツール

Chrome の開発者ツール上でカバレッジを使えば,そのページで使われていないCSSの指定を洗い出すことができます.

とても有効なのですが,そのページしか調べることができません.フォルダ全体で調べたいのですが,書いているのが php なので難しそうだと感じています.

検索する

フォルダ内で検索するというやり方です.堅実なやり方ではありますが,CSS のすべての指定について繰り返さないといけないので,CSS が長大だとかなり面倒ではないかと思います.

質問

私はテキストエディタとして VSCode を使用しています.

VSCode の適当な拡張機能で実現できないでしょうか?

VSCode を使わない方法でも構いません.

2
  • 動的なページでCSSのカバレッジはそもそもCSSとHTMLの対応が三者三葉で単純に行いにくい部分があり、モジュール志向のCSSやscoped CSSなどといったものが好まれる理由でもありますが、Chromeの開発者ツールのようにカバレッジをとる手段もいくつかあるはずです。たとえば、Puppeteerでコードからブラウザを操作しながら複数ページのカバレッジをとることが可能なようです。 Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
    – hinaloe
    Commented 2022年7月12日 17:49
  • ユースケースによってはよさそう PurgeCSS - Remove unused CSS | PurgeCSS
    – hinaloe
    Commented 2022年7月12日 17:52

1 件の回答 1

0

PurgeCSSというツールで使われていないCSSを除外することができそうです。
PurgeCSS - Remove unused CSS | PurgeCSS
デモ動画:How to Scan and Remove Unused CSS Properties | PurgeCSS Tutorial - YouTube

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。