大きな/古いCSSファイルのリファクタリング
現在、100,000ページのWebサイトに取り組んでおり、現在の設計は5年以上にわたって実施されており、継続的な更新により12,000+行のCSSファイルが4つ作成されています。
明らかにCSSは扱いにくくなり、多くのスタイルが複製され、実際に使用されているスタイルの数を知ることはほぼ不可能です。
縮小することはできますが、これは実際に問題に取り組むのではなく、避けられない再作業を遅らせるだけです。
したがって、3つの質問がありますtools.
- 大きなCSSファイルの重複を解消しますか
- サイトをスキャンし、CSSクラスとIDの使用を記録しますか？
- 多分グリースモンキーのようなスクリプトでそのようなスキャンを達成できますか？
http://unused-css.com/ あなたが尋ねるもののいくつかを行い、彼らはこれを言っています：-
Latish Sehgal は、未使用のCSSクラスを見つけて削除するWindowsアプリケーションを作成しました。私はそれをテストしていませんが、説明から、htmlファイルと1つのCSSファイルのパスを提供する必要があります。その後、プログラムは未使用のCSSセレクターをリストします。スクリーンショットから、このリストをエクスポートしたり、新しいクリーンなCSSファイルをダウンロードする方法がないように見えます。また、サービスは1つのCSSファイルに制限されているようです。クリーニングするファイルが複数ある場合は、それらを1つずつクリーニングする必要があります。
Dust-Me Selectors は、未使用のCSSセレクターを見つけるFirefox拡張機能（v1.5以降用）です。表示しているページのすべてのスタイルシートからすべてのセレクターを抽出し、そのページを分析して、使用されていないセレクターを確認します。その後、データが保存されるため、後続のページをテストするときに、セレクターが検出されたときにリストから除外できます。このツールはウェブサイト全体をスパイダーできるはずですが、残念ながら私はそれを機能させることができました。また、スタイルを削除したCSSファイルを構成してダウンロードできるとは思わない。
Liquidcity CSS cleaner は、正規表現を使用して1ページのスタイルをチェックするphpスクリプトです。 HTMLコードで利用できないクラスを教えてくれます。このソリューションはテストしていません。
Deadweight はCSSカバレッジツールです。一連のスタイルシートと一連のURLが与えられると、実際に使用されるセレクターと「安全に」削除できるリストが決定されます。このツールはRubyモジュールであり、Rails Webサイトでのみ機能します。未使用のセレクターは、CSSファイルから手動で削除する必要があります。
Helium CSSは、Webサイトの多くのページで未使用のCSSを発見するためのjavascriptツールです。最初に、テストするページにjavascriptファイルをインストールする必要があります。次に、ヘリウム関数を呼び出してクリーニングを開始する必要があります。
UnusedCSS.comは、使いやすいインターフェースを備えたWebアプリケーションです。サイトのURLを入力すると、CSSセレクターのリストが表示されます。セレクタごとに、数字はセレクタが使用される回数を示します。このサービスにはいくつかの制限があります。 @importステートメントはサポートされていません。新しいクリーンなCSSファイルを構成してダウンロードすることはできません。
CSSESS は、任意のサイトで使用されていないCSSセレクターを見つけるのに役立つブックマークレットです。このツールは非常に使いやすいですが、クリーンなCSSファイルを構成してダウンロードすることはできません。未使用のCSSファイルのみがリストされます。