css - cssで競合するスタイルを体系的に解決します

Question

Webプロジェクトにさまざまなソースからのスタイルシートがいくつかあります。それらを調和させたい。私が必要とするいくつかのスタイル、いくつかは他のものから。スタイルの競合を体系的に解決するためのツールや方法はありますか？IE8開発者ツールを試しましたが、はい、各要素のレベルで競合を表示することができます。でも要素が多いので、要素ごとにやると時間がかかりすぎると思います。理論的には、設計時に2つのcssファイルの競合を表示するツールがある可能性がありますか？！？これで時間を大幅に節約できると思います。

Answer 1

このFirefox拡張機能であるDust-MeSelectors（http://www.brothercake.com/dustmeselectors/）を試しましたか？冗長なスタイルの削除がはるかに簡単になります。

それ以外の場合は、すべてのスタイルを1つのファイルにポップし、同様のルールをグループ化してから、Dust-Meを使用して未使用のルールを削除します。

Answer 2

CSSには競合はなく、カスケードがあります。同じ要素に適用される複数のルールを定義でき、スタイルを配置する順序は重要性を反映するという考え方です。つまり、最後に表示された場合、競合として説明するものがある場合は以前のルールを上書きします。

あなたはどちらかすべきです...

1）どのスタイルシートが最も重要かを判断し、2番目に配置します

また

2）混乱を避けるためにあなたのスタイルを書き直してください

また

3）重要なルールを！IMPORTANTとしてマークします

Answer 3

FireFoxでサイトを表示し、Firebug拡張機能を使用すると、レンダリングされたページの各要素を確認できます。Firefoxの[CSS]タブを使用すると、適用されているスタイルルールのカスケードを確認できます。その要素、およびそれぞれがどのCSSソースファイルからのものか。また、どのルールがオーバーライドされているかも表示されます。

これは、特定の各ルールがどこから来ているのか、何がオーバーライドされているのかを判断するのに役立ちます。

あなたはまだあなたのスタイルシートを「合理化」する仕事を持っています、そしてそれを助けることができる他のツールがあるかもしれません。

Answer 4

複数のソースからのCSSルールの重複を検出するのに役立つ簡単なスクリプトをまとめました：https ：//github.com/mgsloan/css-overlap

書かれているように、それはURLによって参照されるスタイルシートに対してのみ機能しますが、インラインスタイルシートを処理するために非常に簡単に適合させることができます。2つの正規表現を使用してスタイルシートを2つのセットに分割し、ページ内のすべてのDOMノードをスキャンして、両方のスタイルシートのセットの一部のルールが一致する場合を探します。