【CSS】スタイルやクラスがどのHTMLファイルのどの部分に使われているかを知るソフト

Question

CSSファイル内のクラスやIDが大量になってきたので整理したいと思っています。ただ、HTMLファイルも沢山あるので、どのIDやクラスがどのファイルで読まれているのか、または既にどのファイルかも読まれていないID、クラスがあるのかを知りたいのですが、自動で拾ってくれるソフトとかってあるのでしょうか？

ご存知の方いらっしゃいましたら教えてください。

taloo · Accepted Answer

一発で一覧表示できるソフトは知りませんが、
grepを使えるテキストエディタを使えば調べることはできると思います。

タグセレクタはすべてのHTMLファイルで使われている（または使う予定）のため削除不可なので、考えなくていいでしょう。

「#」または「.」で"*.css"ファイルをgrepすると、
cssファイルに書かれているIDセレクタとクラスセレクタの一覧が作れます。
（ただし色指定 #ffffff などのゴミが混ざります）
属性セレクタも使われてるなら、「[」 でgrepすればいいと思います。


そのIDとクラス名で"*.html"ファイルをgrepすれば、
どのＨＴＭＬファイルにIDやクラス名が入っているかを見つけられると思います。

HTMLファイルのgrep結果が０件であれば、そのIDやclass名は使われていない、ということになると思います。
本文中や、タグ名と同じidやclass名があれば、それも表示されますので、
それらの除去は手作業になりますが、たいした労力にはならないでしょう。


正規表現が使えれば
id="(cssファイルから抽出したID)"
class=".*(cssファイルから抽出したclass)
でHTMLファイルをgrepしてみてください。
（正規表現中の括弧は注意書きの一部）

未検証です。

yambejp · Answer

全てのCSSを共通にしているのですか？ちょっと危険な感じがしますねぇ
私の場合、共有CSSと個別CSSをわけて管理してます

共有=common.cssは使うかどうかわからないけど、常に呼んでおくcssとして
個別.cssの先頭でimportするようにします。
個別のcssはhtml名にあわせたcssを用意してヘッダで呼びます。
たとえばaaa.htmにはaaa.cssを用意し、bbb.htmにはbbb.cssを用意するわけです

あとは個別ページのcssは好きにかけばよいわけです。
共通で使いそうだなぁ・・・というものはcommon.cssに、このページでしか
つかわないだろうなぁという場合は個別cssに書くようにすれば
かなりすっきりします。

目安としてはクラスは共有、idは個別としておくと無難ですが、
idだけどいろんなページでつかうもの（たとえばメニューにmenuってidをふるとか）
や、classだけど個別でしかつかわないもの（そのページの複数箇所に
どうしてもおなじ処理をしたい場合など）などありますので状況に
応じてつかいわけるとよいでしょう。

ORUKA1951 · Answer

原理的に無理だと思いますよ。--知らないだけかも-- 　HTML側から、CSSのどの設定が適用されているかは、fireBugを使えば一目瞭然ですが、逆はむりだと思います。＞CSSファイル内のクラスやIDが大量になってきた・・・私も失敗しました。　そもそもCSSを巨大化してしまったのが失敗なので最初から作り直しましょう。そのときにCSSを複数に分けましょう。　いずれ、整理しなくちゃならないなら今のうちに。　HTML側も、class="note foot memo" のように複数書いておくと、CSSもずっと減らせる。

【CSS】スタイルやクラスがどのHTMLファイルのどの部分に使われているかを知るソフト

一発で一覧表示できるソフトは知りませんが、

全てのCSSを共通にしているのですか？ちょっと危険な感じがしますねぇ

原理的に無理だと思いますよ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング