17

Webサイトで未使用のCSSを見つける方法はありますか？

継承したばかりのプロジェクトをクリーンアップしようとしています。

4

5 に答える 5

29

Dust-me Selectorsは、未使用のセレクターを見つけるFirefoxプラグインです。

于 2009-08-24T03:39:20.700 に答える
2

私はちょうどこれに遭遇し、あなたの質問を思い出しました: http://github.com/geuis/helium-css

于 2010-01-24T23:24:47.403 に答える
1

Chrome 59 には、2017 年 4 月以降、CSS と JavaScript のカバレッジ表示が組み込まれています: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

これを有効にするには、開発ツールを開いてからコマンド メニュー ( Cmd+Shift+PMac またはCtrl+Shift+PWindows と Linux の場合) を開き、「show coverage」と入力します。

于 2017-07-12T15:46:25.313 に答える
0

CSS のベスト プラクティス メソッドについて言えることはたくさんあります。要点を押さえようと思います。

CSS リセットを使用します。

h1 {}や などの非常に一般的な CSS ステートメントを削除してみてください#container em {}。ドキュメントのどこかでまたはを別の方法で使用することを選択した場合、既存のコードをオーバーライドすることを心配する必要がないため、 h1.section-titleandを使用する方がはるかに優れています。#container em.important {}h1em

必要がなければ、CSS セレクターを具体的にしすぎないでください。特定のセクションにいると要素の表示方法が変わる場合にのみ、高度な特異性が必要です。blockそれ以外の場合、クラスのコードを再利用可能にするために、多くの場合#container .content .block ...に削減できます。.block ...

CSS の共通点を探し、再利用可能なクラスを作成できるかどうかを確認してください。と に似たブロックがある場合は、class="favorites"とclass="popular"に変えてclass="block block-favorites"、class="block block-popular"共通点を に入れ.blockます。

CSS 内の領域に自動幅を持たせる (暗黙的に行うことができる) 習慣を身に付けて、コンテナーの幅に合わせて拡張します。これにより、コードを変更することなく、Web サイトの狭い部分から広い部分にセクションを移動することが非常に簡単になります。

通常、コードにコメントを付けてセクションに分割すると、コードが読みやすくなります。

より強力な CSS セレクターを実装すると、コードが非常にきれいに見えることに驚かれることでしょう。それらのほとんどはクロスブラウザー互換性があります (Internet Explorer 7 以降)。
いくつかの貴重なリソース:いつ使用できますか... - CSS セレクターのQuirks モード- CSS セレクターのw3

回答は次の場所から移動しました:
既存の CSS/未使用のスタイルをクリーンアップするためのベスト プラクティス

于 2011-10-21T21:22:08.270 に答える