大規模なwebアプリの改修時に、cssのクラス名を変更する場合の影響範囲の調査方法

Question

##環境
ASP.NET MVC5
.NET Framework

##状況
今月からWebアプリの現場に配属された2年目の新人です。
開発未経験＆Web系は今の現場が初めてなので、用語の使い方等不適切な部分がある可能性があります。
簡単な不具合対応を任され、原因までは人に聞きつつわかったのですが影響範囲の特定につまずいています。
「やってみたこと」に記載の方法は人から聞いて知った方法なのですが、後述の通り検索結果に問題がありそうで、調査方法としてより適切方法があれば知りたいという状況です。

前提

ある.cssファイル内のクラス名が不適切なため不具合が発生しています。
改修の対応としてcssを修正してクラス名を適切なものにしようとしています。

問題内容

クラス名を修正するとそのクラスを適用しているほかの要素にも影響が及ぶため、影響範囲の調査が必要です。
ただし、htmlファイル自体は動的に作成されているため、単純にソースフォルダにgrepをかけるだけではわからないようです。
（ソースフォルダには.cshtmlというファイルはあり、このファイルからブラウザに表示されるhtmlが生成されていると考えています）
当該の.cssファイルを読み込んでいる画面はわかっています。（画面のレイアウトを作っている.cshtmlファイルがgrepでヒットしたため）
その画面内のどの要素が該当のクラスを適用しているのかを漏れなく調べるには、どうすればいいでしょうか。

やってみたこと

該当の画面をブラウザで表示し、F12を押すと出てくる開発者ツールで検索しました。
問題のクラス名を「.parent .child」とすると、開発者ツールのコンソールで下記コマンドを実行しました。

$('.parent').find('.child')

こうするとコンソール上に、「.parent .child」を適用しているhtml要素が表示されるのですが、
その画面が読み込んでいる別のcssファイルにも同じクラス名があるようで、そちらがヒットしてしまいます。
さらになぜか、ヒットしてほしい要素がヒットしなかったので、影響範囲の調査としては信頼できる方法ではないのかなと思っています。
（開示できる情報が少なく申し訳ないですが、もしこれだけの情報でなぜヒットしなかったのかがわかる方がいれば教えていただきたいです。）

11/30 追記
目的のクラス名がヒットしない問題は、解決しました。開発者ツールの使い方が間違っていたようです。
ただ別の問題が発生したので、以下に新たに質問を投稿しました。
https://teratail.com/questions/307263?modal=q-comp

ご回答いただきたいこと

上記のような状況でCSSの修正をする場合の影響範囲の調査方法を教えてください。
いろいろなやり方があるかと思いますが、漏れなく調査できていることがわかる方法であればどのような方法でも問題ありません。
またできれば、一般的にCSSを修正する際の、影響範囲の調査としてスタンダードな方法があれば、今回の状況で使えるか否かにかかわらず今後のために教えていただきたいです。

Comments

[退会済みユーザー]

.NET Framework か Core どっちですか？　そのバージョンは何ですか？　.NET 版ですと MVC1 ～ MVC5 があるのですがどれですか？

[退会済みユーザー]

.NET FrameworkのMVC5だと思われます。

[退会済みユーザー]

上記は質問欄を編集して追加情報として追記願います。

[退会済みユーザー]

探すのは「ある.cssファイル内のクラス名」だけでいいのであれば、まず .cshtml を探せば、CSS クラス名がコードに埋め込まれているはずなので、静的なものはほぼ全部見つかると思いますが？

クライアントスクリプトで動的に適用される CSS クラスがあるなら .js ファイルを探してはいかが？

想像ですが、質問者さんが ASP.NET がレンダリングした html ソースを探して見つからなかったのは、動的に適用されたものではないかと思います。

[退会済みユーザー]

ありがとうございます。
jsファイルを探してみます。
探し方としては、grepを想定されていますか？デベロッパーツール等を想定されていますか？

[退会済みユーザー]

テキストファイル（.cshtml も .js もソースはテキストファイル）の中の任意の文字列を検索できるツールであればいいと思います。

ブラウザのディベロッパーツールは違うのでは？　Visual Studio の検索機能のことを「ディベロッパーツール」と言っているならそれも使えると思います。

[退会済みユーザー]

質問者さん、無言になってしまいましたが、回答したのでそれに対するフィードバックを回答のコメント欄に書いてください。役に立った/立たなかったぐらいはすぐ返せるのでは？ 役に立たなかったなら、どこがダメだったか書いてもらえると別の案が出せるかも。

Answer 1

質問のコメント欄に書いたことですが、PC が使える環境になりましたので、以下に説明用の画像を追加してまとめて書いておきます

探すのは「ある.cssファイル内のクラス名」だけでいいのであれば、まず .cshtml のソースコードを探してみてください。

以下の画像は Visual Studio 2019 のテンプレートで自動生成した MVC5 アプリの _Layout.cshtml ですが、クラス名がハードコーディングされているのが分かりますか？

他の .cshtml も同様な形で作られているはずです。なので、全ての .cshtml のソースファイルから目的のクラス名の文字列を探せば、静的なものはほぼ全部見つかると思います。

クライアントスクリプトで動的に適用される CSS クラスもあると思います。想像ですが、質問者さんが ASP.NET がレンダリングした html ソースを探して見つからなかったのは、動的に適用されたものではないかと思います。

例えばフレームワーク組み込みの機能に、ユーザー入力を JavaScript で検証し、検証結果に応じて表示される html 要素に付与される class 属性の設定を切り替えるという機能があります。

具体的には、ValidationSummary の validation-summary-valid と validation-summary-errors、ValidationMessageFor の field-validation-valid と field-validation-error、TextBoxFor / EditorFor の valid と input-validation-error などがあります。

それらのクラス名は .js ファイルにハードコーディングされていますので、.js ファイルを探してみてください。

スクリプトがインラインで .cshtml ファイルに埋め込まれているケースもあるかもしれませんが、それは .cshtml のソースを検索すれば見つかると思います。

探すためのツールは、テキストファイル（.cshtml も .js もソースはテキストファイル）の中の任意の文字列を検索できるツールであれば何でもいいと思います。

Visual Studio の検索機能のも使えると思います。上の画像を見てください。

Comments

[退会済みユーザー]

遅くなって申し訳ありません。
SurferOnWwwさんのご回答でだいぶ問題点を絞ることができました。
特定のcssが適用されている親要素の子要素に対する（「.parent .child」型の）cssを検索する方法を調べるべきであるようです。特にそれがjsによって生成されたhtmlに適用されている場合、洗い出しの方法がわからなくなります。
その件については本質問とはやや離れてしまうため、別の質問を立てました。（ASP.NETと関係なくなるので）
ご回答いただきありがとうございました。