0

特定のクラスが定義されているすべての要素を表示/強調表示するツールはありますが、css ファイルで定義されているこのクラスの css ルールはありませんか?

たとえば、次のようなhtmlコードがあります。

...
<div class="class_one">Some text for class one</div>
<div class="class_two">Some text for class two obviously</div>
...

.css ファイルには次のものがあります。

...
.class_one {
    color: red;
}
.class_three {
    color: magenta;
}
...

この場合、css 内に定義のないすべてのクラスを知る必要がある場合は、「class_two のクラス定義がありません」と表示されるはずです。また、ローカルの LAMP バンドル (私の場合は MAMP Pro) を使用してプロジェクトを行っているため、このツール (またはその他のもの) をオンラインにしないでください。

私の英語がそれほど悪くないことを願っています:)

4

3 に答える 3

2

私が遭遇した唯一のOOTBソリューションはこれです: http://unused-css.com/

制限はありますが、明らかにサイトはオンラインでなければなりません。しかし、主なアイデアは、そのサイトの回路図で明確に説明されています。必要なもの:

  1. HTML/JavaScript で使用されているすべてのクラス/ID を収集する
  2. CSS で定義されているすべてのセレクターを収集する
  3. 両方のリストをクロスして、残っているものを確認します

これは単純な作業のように思えますが、ページごとに異なる CSS があったり、CSS が動的にレンダリングされたりすることがあります。

編集：

すべての ID とクラスを収集するには、ファイルに対して次の正規表現を実行します。

<(.*)class="(.*)"(.*)>
<(.*)id="(.*)"(.*)>

( http://regexpal.com/でテスト済み)

メモ帳 ++ (またはパターンを検索するときに便利なその他のもの) を使用して、HTML に存在するアイテムの合計セットを収集します (おそらく JavaScript 用に変更することもできます)。次に、一致した CSS クラスを 1 つの正規表現に集め、それを自分の CSS と照合して何が欠けているかを確認します。

于 2012-12-05T10:37:47.437 に答える
0

次のようなjqueryプラグインを使用できます-

http://csslint.net/about.html

または、css を入力してエラーと警告を検出することもできます。

http://csslint.net/index.html

于 2012-12-05T11:12:31.427 に答える
0

CSSファイルに定義がないすべてのクラスを表示する方法は?

classこれは非常に簡単です。すべての html 要素を解析し、属性のすべてのエントリをリストに入力します。この後、CSS を解析し、2 番目のリストに入力します。最初のリストから CSS リストのすべてのエントリを削除すると、CSS 宣言のないクラスが作成されます。

JavaScript で動的に作成されたクラス名を使用する場合、これはさらに複雑になることに注意してください。

特定のクラスが定義されているすべての要素を表示/強調表示するツールはありますが、css ファイルで定義されているこのクラスの css ルールはありませんか?

ツールはまだ聞いたことがありません。

于 2012-12-05T10:37:32.293 に答える