未使用のCSS定義を識別する方法


414

プロジェクトで未使用のcss定義を特定するのに役立つ良い方法はありますか?たくさんのcssファイルが取り込まれましたが、今は少し片付けようとしています。


「プロジェクトで」と言ったとき、正確にはどういう意味ですか?使用している環境によって、答えは異なる場合があります。
Ian Robinson、


私はかなり良い仕事をするツールを作りました。ここに私のだコードペン
toddmo

私はあなたのためにそれを行うことができるスクリプトを書きました:github.com/kgoedecke/unused-css-parser
Kevin Goedecke

回答:


145

14
拡張機能がFirefox 4で機能しない
mvark '15

5
この更新は決して表面化しておらず、SitePointフォーラムで質問した後、プラグインは死んでいるように見えます。
マイクB

3
作者がごく最近、自分のWebサイトにOperaのバージョンでさえ、更新されたバージョンを投稿したようです。チェックアウトbrothercake.com
粉化

2
残念ながら動作しなくなりました
ジョナサン

4
私は代替を作成し、Webサイトの複数のページをクロールします(再帰的にリンクをたどり
Alex

259

Chromeデベロッパーツールには、未使用のCSSセレクターを表示できる[ 監査 ]タブがあります。

監査を実行し、[ Webページのパフォーマンス]で[ 未使用のCSSルール削除する]を参照してください

ここに画像の説明を入力してください


64
それは素晴らしいですが、あまりにも悪いので、それをページのグループで実行することはできません(そうしないと、未使用のCSSルールが避けられない場合があります)
Damon

17
監査ツールを実行すると、未使用のcssが表示されますが、どのように使用するのですか?各アイテムを手動で検索して削除する必要がありますか?
ティモシーヘンリー2013

19
現在のページのみです。「現在のページで使用されていないCSSの2445ルール(83%)」と書かれているため、あまり役に立ちません。
チャンティアル

8
アイテムを展開すると、使用されていない実際のルールのリストが表示されます。ただし、DOMをその場で変更するサイトでは役に立ちません。
ハウィー2015

10
実際、これはカバレッジに移動しました-監査に移動します->下部のコンソールの隣にメニュー(3つの縦点タイプのメニュー)があり、そこでカバレッジを選択できます。レコードをクリックしてナビゲートするだけです。
グラハムリッチー

65

このサイトを見つけました– http://unused-css.com/

見た目は良いですが、出力された「クリーン」なCSSを自分のサイトにアップロードする前に徹底的にチェックする必要があります。

これらすべてのツールと同様 と同様に、スタイルのないIDとクラスが削除されていないことを確認する必要がありますが、JavaScriptセレクターとして使用されています。

以下のコンテンツは http://unused-css.com/ているため、他のソリューションを推奨するためにクレジットを提供してください。

ラティッシュセーガルは、未使用のCSSクラスを見つけて削除するWindowsアプリケーションを作成しました。私はそれをテストしていませんが、説明から、htmlファイルと1つのCSSファイルのパスを提供する必要があります。プログラムは、未使用のCSSセレクターをリストします。スクリーンショットから、このリストをエクスポートしたり、新しいクリーンなCSSファイルをダウンロードしたりする方法はないようです。また、サービスは1つのCSSファイルに制限されているようです。クリーンアップするファイルが複数ある場合は、1つずつクリーンアップする必要があります。

Dust-Meセレクターは、未使用のCSSセレクターを検出するFirefoxの拡張機能(v1.5以降用)です。表示しているページのすべてのスタイルシートからすべてのセレクターを抽出し、そのページを分析して、使用されていないセレクターを確認します。次にデータが保存されるので、後続のページをテストするときに、セレクターが検出されたときにリストから除外できます。このツールはウェブサイト全体をスパイダーできるはずですが、残念ながら動作させることができました。また、スタイルを削除したCSSファイルを設定してダウンロードできるとは思いません。

Topstyleは、CSSを編集するための一連のツールを含むWindowsアプリケーションです。あまりテストしていませんが、未使用のCSSセレクターを削除する機能があるようです。このソフトウェアの費用は80米ドルです。

Liquidcity CSSクリーナーは、正規表現を使用して1つのページのスタイルをチェックするphpスクリプトです。HTMLコードで利用できないクラスを教えてくれます。私はこのソリューションをテストしていません。

DeadweightはCSSカバレッジツールです。一連のスタイルシートと一連のURLが与えられると、実際に使用されるセレクターと「安全に」削除できるリストが決定されます。このツールはrubyモジュールであり、rails Webサイトでのみ機能します。未使用のセレクターは、CSSファイルから手動で削除する必要があります。

ヘリウム CSSは、Webサイトの多くのページで未使用のCSSを検出するためのJavaScriptツールです。最初に、テストするページにJavaScriptファイルをインストールする必要があります。次に、ヘリウム関数を呼び出してクリーニングを開始する必要があります。

UnusedCSS.comは、使いやすいインターフェイスを持つWebアプリケーションです。サイトのURLを入力すると、CSSセレクターのリストが表示されます。各セレクターの数値は、セレクターが使用された回数を示します。このサービスにはいくつかの制限があります。@importステートメントはサポートされていません。新しいクリーンなCSSファイルを構成してダウンロードすることはできません。

CSSESSは、任意のサイトで未使用のCSSセレクターを見つけるのに役立つブックマークレットです。このツールはかなり使いやすいですが、クリーンなCSSファイルを構成してダウンロードすることはできません。未使用のCSSファイルのみがリストされます。


5
ただ、unused-css.comでは有料会員でないとCSSをダウンロードできないので、最低プランは月額$ 29からです。私へのサービスには少し高いようです
georgiecasey

1
purifycss github.com/purifycss/purifycssをミックスに追加します。これは無料で、非常に人気があり(githubのスターによると)、単一ページのアプリで動作します。
Dmitry Gonchar 2017

21

Google Page Speedがそれを行います(実際には、使用されていないCSSを通知するだけではありません)。FireFoxでは、FireBugアドオンとして利用できます。それからオンライン版もあります。


8

より良いCSS縮小版C#のは冗長なスタイルをダンプします。

これと一緒にDust-Meを使用することもできます。

ダストミーに現在表示されていないコンテンツがある場合は、必要なスタイルを破棄する可能性があることに注意してください。

編集:リンクは壊れていましたが、archive.orgにはページとコードの両方があります。


7

CSSの使用

実際に使用されているCSSルールを表示するFirebug拡張。

CSS Usageは、Firebugの拡張機能であり(Firebugをインストールするために必要)、未使用のCSSスタイルルールを知ることができます。使用するCSSと使用しないCSSを識別します。それはあなたが不必要な部品を取り除くことができるかを指摘することを可能にします。CSSファイルをできるだけ軽量に保つには、必ずこのアドオンを使用する必要があります。


6

誰かがDustMe Selectorsを更新してFirefoxを新しい名前で再び使用できるように見えます-'CSS Roundup' http://blog.brothersmorrison.com/?p=198


著者は、新しいバージョンがwww.brothercake.comで、彼のウェブサイト上でほんの数週間前に投稿しました
粉化

このプラグインは利用できなくなり、ダウンロードへのリンクはブラザーケーキにあります
Andrea Mauro


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