スタイルシートで未使用/未適用のCSSルールを見つけるにはどうすればよいですか?


18

巨大なCSSファイルとHTMLファイルがあります。HTMLファイルの表示中にどのルールが使用されていないかを知りたい。このためのツールはありますか?

CSSファイルは数年にわたって進化してきましたが、私が知っていることから、CSSファイルから何も削除されたことはありません。

編集:Dust-MeセレクターまたはChromeのWebページパフォーマンスツールを使用することをお勧めします。ただし、どちらもセレクターのレベルで機能し、個々のルールでは機能しません。セレクター内のルールが常にオーバーライドされるケースがたくさんあります。これは私が主に取り除きたいものです。例えば:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

HTMLのすべてのテキストはラッパー要素の中にあるため、決して白ではありません。bodyのパディングは常に機能するため、もちろんbodyセレクター全体を削除することはできません。そして、私もそのような役に立たないルールを取り除きたいです。

編集:そして、無駄なルールの別のケース:何も変更せずに既存のルールを複製する場合:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

私は幸いにも2番目を取り除きmargin-leftます...再び、それらのツールはそのようなものを見つけられないように思えます。

編集:私はすべての答えに感謝しますが、悲しいことにあなたが提案したツールは有用な提案をしませんでした。私はあなたの答えを支持しましたが、上記で指定したように、よりきめ細かく処理するツールを待ちます。

ありがとうございました、


適切なツールの欠如を機会としてとらえることができます。必要なものを理解しているので、そのようなツールを作成するのに最適な人かもしれません。既存のツールのコードを調べてアイデアやテクニックを確認し、セレクターではなくルールのレベルで機能するものを構築できます。名声と富のチャンス!...まあ、たぶん名声;)
iconoclast

@Brandon:この質問は「注目すべき質問」マークをたたくだけです。そのため、あなたは正しいかもしれません:
liori

回答:


8

Dust Me Selecters Firefox拡張機能

Chromeのデベロッパーツールでは、Webページパフォーマンスツールを使用して、未使用のCSSルールを見つけることができます。


すぐに確認します!
リオリ

これらのツールは、無駄なセレクターのみを削除できます。質問を明確にしました。
リオリ

2
@liori:これが確実に可能だとは思わない。マージンの例では、2番目のマージンルールは不要に見えるかもしれませんが、より特異性が高く、後のルールをオーバーライドする可能性があります。たとえば、クラス.abcに異なるマージンがある場合、<a class="abc">ホバー時にマージンを変更すると思います。これはおそらく意図したものではないかもしれませんが、確かにそうなる可能性があり、その重複したルールを盲目的に削除することはできません。
不機嫌なヤギ

@DisgruntledGoat:閉じた世界の場合を考えています。指定されていない場合は存在しません。の定義がない場合a.abc、またはHTMLのどこにも<a class="abc"/>がない場合、それは存在しません。とにかく、私はすでにここでこの質問をするように促したタスクを終了し、終了しました多くのヒューリスティックを適用します。Chromeのデベロッパーツールを試しましたが、あまり役に立ちませんでした。
リオリ


4

私はいつもCSS Usageが好きでした。これはFirebugのプラグインであり、ページをスキャンして、どのCSSルールが適用されていないかを確認できます。さらに、自動スキャンし、複数のページにわたって機能します。


2

uncssを確認してください。これはノードモジュールです。

「UnCSSは、スタイルシートから未使用のCSSを削除するツールです。複数のファイルで機能し、JavaScriptが挿入されたCSSをサポートします。」

https://www.npmjs.com/package/uncss

コメント後に編集:

私はあなたが2つの異なることを求めていると思います:

  1. 未使用のルールを自動的に削除します。これがuncssでできることです。CSS byebyeというこのツールも作成しましたが、あなたが尋ねるような自動ではありません:https : //www.npmjs.com/package/css-byebye

  2. ルールがマージ/簡略化される可能性のあるスタイルシートを最適化します。

その場合、この種のことを行う2つのツールをお勧めします。

彼らは多かれ少なかれ同じ最適化を行い、時には一方が他方よりも良い結果をもたらし、時にはそれは反対です。スタイルシートに依存します。(次も実行できます:P)

私は、うなり声でビルドプロセスの一部としてそれらを使用します。ですから、あなたが尋ねるような視覚的なものではありませんが、彼らはあなたが望む種類の最適化を行います。

CSSOについて彼らが言うことはここにある(完全な情報はこちら:https ://en.bem.info/tools/optimizers/csso/ )

構造最適化:

  • 同一のセレクターでブロックをマージする
  • 同じプロパティを持つブロックのマージ
  • オーバーライドされたプロパティの削除
  • オーバーライドされた速記プロパティの削除
  • 繰り返しセレクターの削除
  • ブロックの部分的なマージ
  • ブロックの部分分割
  • 空のルールセットとアットルールの削除
  • マージンとパディングのプロパティの縮小

メインページから判断すると、セレクタレベルで機能します。私は質問で言及した2つの例のケースで実際にルールを削除できますか?
リオリ

回答を編集しました。CSSO Webインターフェースを使用して最初の例をテストしました:結果:body {color:#fff; padding:10em} h1、p、ul {color:#000}
Kev

1

@ジョン:優れたツール、リンクをありがとう

@liori:また、要素名/プロパティを表示し、CSSをリアルタイムで編集できる(CSSファイルに書き込まない)Firefox Web Developerプラグインを使用することを強くお勧めします。 CSSを3秒ごとに保存およびアップロードする必要があります。+より多くの機能をロードします。

Firebugにプラグインする非常に優れたDOMインスペクターもあります。これはプラグインでもあり、Javascriptのソートに最適です。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.