動的に生成されたサイトで、過去と現在を問わず、非常に多くの人が作業を行っていて、20,000行を超えるCSSを含む共有スタイルシートのコレクションがあるとします。まったく整理されていません。クラスとIDベースのセレクターがいくつかありますが、タグベースのセレクターが多すぎます。そして、いくつかのコントローラーを介して、これらのスタイルを使用する100個のテンプレートがあるとします。
おそらくFirebugのように機能するツールがあり、URLをポイントすると、そのページに適用可能なすべてのCSSセレクターが決定され、ファイルにダンプされますか？基本的に、共有スタイルシートをページごとにリッピングする方法。
回答:
以前、FirefoxプラグインであるDust-MeSelectorsを使用しました。CSS値が使用されている複数のページにわたって結合されたリストを維持するため、非常に使いやすく、用途が広いです。
欠点は、サイト全体をスパイダーするように自動化できなかったため、サイトの主要なページ/テンプレートでのみ使用することになったということです。それにもかかわらず、それは非常に便利です。
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
上記のコメントとは異なり、Dust-Me Selectors2.2はFirefox3.6と互換性があります（インストールしたばかりです）。
これらは有望に見えます：
（Firefox用ではありませんが、これは誰かを助けるかもしれません）
Chromeで作業している場合は、次の拡張機能を使用できます。
CSSの削除と結合（https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh）
Uncss-Online-非公式サーバーに出くわしました。テストや1回限りの使用に非常に便利です。私が出会った中で最高のツールだと思います。
UnCSSは、未使用のCSSをスタイルシートから削除するツールです。複数のファイルで機能し、Javascriptが挿入されたCSSをサポートします。これは次のように使用できます。
このツールを使用する他の高度な方法については、Githubページを確認してください。
SnappySnippet
SnappySnippetという名前のChromeのオープンソースのアドオンがあります。他のアドオンよりもはるかに優れていることがわかりました。Chromeですでに利用可能な開発者ツールを拡張するだけです。ページの一部だけを抽出して、関連するすべてのCSSを抽出することもできます。このstackoverflowの投稿を見てください
JavaScriptを使用した私の解決策は次のとおりです。
var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
var sheet = document.styleSheets[i];
var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
if (rules)
{
css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
for (var j=0; j<rules.length; j++)
{
var rule = rules[j];
if ('cssText' in rule)
css.push(rule.cssText);
else
css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
}
}
}
var cssInline = css.join('\n')+'\n';
最後cssInlineに、ページのすべての鋼板とその内容のテキストリストです。
例：
/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }
/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }
/* Stylesheet : [inline styles] */
.hidden { display: none; }
PurifyCSSを確認してくださいこれは、CLIまたはGulp / Grunt / Webpackを処理できるユーザー向けです。
クラスがjavascriptによって挿入されている場合でも、単一ページ、複数ページ、またはプロジェクト全体から未使用のスタイルを削除できます。
あなたがグーグルできるなら、あなたがPurifyCSSについて学ぶことができるそこにたくさんのリソースがあります。
このFirefox拡張機能は、おそらくあなたの問題、Dust-MeSelectorsを解決するでしょう。CssCleanerまたはCssHelperと呼ばれる小さなデスクトップアプリもありますが、それへのリンクを見つけることができませんでした...（同様のタスクのためにずっと前にダウンロードした私のマシンでここに持ってください）
単一のページを扱っている場合は、ブックマークレットを使用して、Webページで実際に使用されているCSSのみをすばやく取得することもできます。
それでおしまい。これで、静的ページをカプセル化する場合（つまり、移植可能にする場合、または独自のiframeから提供する場合）、ブックマークをクリックするだけで、現在のページで使用されているすべてのCSSがオーバーレイで表示されます。影をクリックしてオーバーレイを閉じます。
このソリューションの良い点の1つは、メディアクエリも抽出されるため、レスポンシブページをサポートすることです。ボーナスとして、メディアクエリはビューポートサイズの特異性によってソートされます（たとえば、後@media (max-width: 767px)に来る）。 @media (max-width: 1023px)
必要に応じて、生成されたCSSを縮小するオプションを追加することもできます。このブックマークレットは自分のニーズにのみ使用しているため、広くテストされていません。問題があればコメントで報告してください。
注：このブックマークレットをChromeのローカルファイルで機能さ--allow-file-access-from-filesせるには、Chromeショートカットターゲットに追加します。例：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
このツールを使用してみてください。これは単純なjsスクリプトです https://github.com/shashwatsahai/CSSExtractor/ このツールは、アクティブなスタイルのすべてのソースを一覧表示する特定のページからCSSを取得し、ソースを次のようにJSONに保存するのに役立ちます。キーとルールを値として。hrefリンクからすべてのCSSをロードし、それらから適用されたすべてのスタイルを通知します。出力は任意の名前のJSONファイルに保存できます。
うーん..CSSファイルのサーバーサイド解析を使用してさまざまなCSSセレクターを抽出し、ブラウザー内でこれらのそれぞれをjQueryセレクターとして実行することで、これにブルートフォースを投げかけます。あまりエレガントではありませんが、機能するはずですか？
2020年9月の時点で、この質問はほぼ10年前のものです。提供されたソリューションのほとんどが機能しなくなったか、リンクされたプロジェクトが消えました。
ただし、Googleは現在、優先順位付けの指標の1つとしてページ速度を使用しているため、この質問は依然として非常に重要です。
リストされているすべてのリンクを調査した後、purgecss.comを見つけました。。これは、Angular、React、Vueなどを使用して最新のWebアプリ/ SPAで未使用のCSSをクリーンアップするための最良のオプションのようです。PostCSS、Webpack、Grunt、Gulpとのビルド統合もあります。
また、UnCSSはまだ維持されているようです。PurgeCSSと同じくらい強力ですが、ビルドプロセスや単一ページのJavaScriptアプリには統合されていません。
使用することもできます http://getcssusedinapage.comを使用して、ページで使用されるCSSを取得ます。それは無料で、速く、あなたがあなたのウェブサイトにコピーして貼り付けることができる最小化され最適化されたCSSコードとともにあなたに多くの詳細を返します