CSSルールのクリーンアップツール

Question

私たちは、新しい要素が我々のシステムと同様に、これらのファイルを参照する（さらにその上の他のJSPページを含めると）JSPページに追加された時はいつでもちょうど年間で成長を続け、いくつかの大規模なCSSファイルを持っています。

私たちは、もはや使用され、冗長化されている多くの多くのルールを持っていることを知っています。

新しいツールがちょうど出てきます。クリーンアップとCSSルールを最適化するには、ディレクトリや援助を分析することができます（たとえば、AptanaのやW3CのCSSのバリデータとして明らかなもの以外の）ツールはありますか？

Answer 1

それはあなたのHTMLのDOMコンテンツがどのような方法でオンザフライで生成された場合は特に...トリッキーな作業です。

ダスト・ミー・セレクタプラグインは便利ですが、ページごとに、セレクタの多くは未使用になります...ではなくNECSは無効になります。

私はクリーンアップを支援するために使用されてきたいくつかのトリックがあります。

一つ一つは、あなたはセレクタが使用されているかどうかを判断するために、すぐに見つけることができるようになりますいくつかの恐ろしいスタイリングを挿入します。例えばます。

border:6px dashed #ffaacc;
padding:12px;

今巨大な点線のホットピンクのボーダーで描画したものは...「アクティブ」セレクタです。あなたはそれを見ずに自分のサイト/アプリのほとんどをサーフィンすることができた場合、それは「死んだ」そうです。

（自分のCSSコードを「生成」されている場合は、これは一度に様々な色をテストし、セレクタの「ID」を付加するコンテンツ生成に使用する最適化することができます）。

あなたが生成されたCSS方式を使用する場合は、

別のオプションは...と言う設定し、あなたの選択...生成されたURLと背景画像に、最終的なプロパティを追加することです。例えばます。

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

そして、あなたは、単にしばらくの間、あなたのサイト/アプリをサーフィン、ログには要求されなかった任意の生成された画像のURLのために... HTTPの画像要求のためのウェブログを確認...あなたはおそらく、「死体で発見しました「セレクタ

Answer 2

Firefox用ダスト・ミー・セレクタのプラグインがあるが、ありますそれはもちろん、ディレクトリではなくて、ブラウザでレンダリングされたページを検索します。

Answer 3

セレンには、ページのテストを自動化し、CSSセレクタを経由して要素を選択することができます。あなたはサイト全体の一致を蓄積する場合は、比類のない項目を識別することができるだろう。