web-dev-qa-db-ja.com

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

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

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

編集： Dust-Me Selectors または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を取り除きます...繰り返しますが、これらのツールはそのようなものを見つけられないようです。

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

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

cssoptimization
18
liori

Dust Me Selectors Firefox拡張機能

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

8
John Conde

nused-CSS.com をご覧になることもできます

5
user5859

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

4
macca1

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
Kev

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

@liori： Firefox Web Developerプラグイン もお勧めしますまた、CSSを3秒ごとに保存およびアップロードしなくても、CSSの変更をテストできます。 +より多くの機能をロードします。

Firebugにプラグインする非常に素晴らしいDOMインスペクターもあります。Firebugはプラグインであり、Javascriptのソートに最適です。

1
Digital Essence

実際、新しいFirefox Developer EditionブラウザのJohnは、FirebugやFirefoxユーティリティを使用するよりも優れています。試してみてください。きっと失望することはないでしょう！

https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

0
Kevin Morrison