スタイルを記述するとき、ページの CSS がいくつかのバージョンに変更された後、一部のスタイルが使用されなくなったり、一部のスタイルの名前が変更され、元のスタイルが削除され忘れられたりすることがあります。ページのコンテンツ。これらのサーバースペースと帯域幅の無駄な消費により、メンテナンスコストも増加します。では、これらの無駄なスタイルをクリーンアップする方法はあるのでしょうか?今日は、より便利なツールをいくつか見てみましょう。
ダストミーセレクター
Dust-Me は非常に便利で使いやすい Firefox プラグインで、ページ内で呼び出されるすべての CSS ファイルを分析し、ページ内で使用されていない CSS ファイルも分析できます。
<link> タグ、<?xml-stylesheet?> 処理命令、@import ステートメントなどを使用して導入されたスタイル ファイルを含む、ローカルおよびリモートのスタイル ファイルをサポートします (ただし、ページ内の <style> ブロックとインライン スタイルはサポートされません)
IE の条件付きコメントで導入されたスタイル ファイルをサポートします。
単一のページまたは Web サイト全体をチェックできます。
CSS1 セレクター、ほとんどの CSS2 および CSS3 セレクターをサポートします。
「* html #fuck-ie」などの一般的な CSS ハックは「html #fuck-ie」として解釈されることを理解してください。
Firefox 3.5 および Firefox 3.0 をサポート 実際、FF 3.5 の js エンジンの改良により、FF 3.5 のパフォーマンスは FF 3.0 よりも 50% 向上しています。
インストール: ここをクリックしてください。同時に、プロジェクトのソース コードをダウンロードできます。詳細については、Dust-Me セレクターの公式ページをご覧ください。
ページ速度
Page Speed は、Google が提供するフロントエンド パフォーマンス分析ツールです。YSlow に似ていますが、未使用の CSS を削除するなど、よりユニークで便利なツールがいくつかあります。
Page Speed は YSlow と同様に Firebug に依存しています。詳細とインストールについては、こちらを参照してください。
CSS 冗長性チェッカー
CSS Redundancy Checker は、特定の CSS ファイルを使用しているすべてのページで無駄なスタイルがないかチェックできる無料のオンライン アプリケーションです。特定のスタイルの使用状況を複数のページで同時に確認できます。このツールの欠点は、一度に複数の HTML ページをチェックできますが、一度に 1 つの CSS ファイルしかチェックできず、CSS ファイルを手動で入力する必要があることです。
インテリJアイデア
IntelliJ IDEA これは DreamWeaver に似た非常に強力な IDE ですが、中国ではあまり使用されていません。このソフトウェアには、CSS ファイル内の未使用のクラスと ID を分析できるオンザフライ コード分析ツールが含まれています。
式ウェブ
Microsoft の新世代 Web サイト開発ツールである Expression Web は、今でも多くの人に使用されています。その CSS レポート機能は、クリアする必要がある未使用の CSS をチェックできます (私は実際に Web サイトを開発するために EW を使用したことがありません。このソフトウェアを使用する子供たちにはぜひ使用してほしいと願っています)。ヘルプを確認してください)。
結論
もちろん、ここで説明されていない他のツールがあるかもしれません。それについて何か知っている場合は、それをみんなと共有することができます。
さらに、通常、Web サイト全体のスタイルを 1 つまたは複数のスタイル ファイルに記述し、ページ内ですべて呼び出すか、モジュールで呼び出します。その場合、特定の CSS ファイル内のスタイルは特定のページでは使用されない場合があります。あるページで使用されている 他のページでも使用されているため、これらのツールを使用して CSS ファイル内の冗長なスタイルを検出する場合、スタイルをクリアすると他のページに影響を与える可能性があるため、Page Speed によって提供されるチェック結果には注意が必要です。単一のページにのみ適用され、Web サイト全体には適していません。代わりに Dust-Me または CSS 冗長性を使用してください。 Checker を使用すると、Web サイト全体または Web サイトの複数のページを同時にチェックできるため、間違いを防ぐことができます。
PS:Knowledge Capsules の取り組みに感謝します。