特定の要素のみCSSを指定したくない

状況

まずは「どういう状況から何をしたのか？」ってヤツ。

• サイトはすでにあり、すべてのページで「A.css」を読み込ませている。
• そのサイトの「zebra.html」のみ「A.css」と「B.css」を読み込ませたい。

次に「何が起きたのか？」ってことと「その原因は？」の２つ。

• 「.hoge」という記述が「A.css」と「B.css」の両方にある。
• 「A.css」と「B.css」の「.hoge」が合体した状態で「zebra.html」に適用された。

最後に「どうなればいいのか？」ってこと。

• 「zebra.html」では、「B.css」の「.hoge」のみ適用させたい。

対策案

対策案はいくつかある。

1. 諦める
2. 「zebra.html」のみ「A.css」を読み込まない or 別途CSSを用意する
3. 「A.css」の「.hoge」を「.hogehoge」に書き換える
4. 「B.css」の「.hoge」を「.hogehoge」に書き換える
5. 別案を考える

とりあえず、ひとつずつ考えていこう。

対策案１：諦める

考えるまでもなく、諦めるわけにはいかない。

対策案２：読み込ませるCSSの制御

まず「A.css」を読み込まないって方法が考えられるが「A.css」には「.hoge」以外の記述が多々あるわけなので「読み込まない」という案は却下。

次に「A.css」から「.hoge」以外の記述を書き出して「A2.css」を用意して「zebra.html」のみ「A2.css」「B.css」を読み込ませるって方法。

現実的な気はするけど、「.hoge」以外の記述部分を修正・追加するたびに「A.css」と「A2.css」を修正する必要が出てくる。

単純に「面倒だからヤだ」ってのもあるけど、それ以上にミスが増える率が高くなるので避けたい。
「A.css」を修正したけど「A2.css」の修正を忘れていた・・・ってのが多くなりそう。
あとはコピー＆ペーストした際に「関係ない行まで選択していた」や「関係ある行すべてを選択していなかった」などだったり。

ということで、この案は避けたい。

対策案３：A.cssの修正

「A.css」の「.hoge」を「.hogehoge」に書き換えれば解決なんだけど、これをやっちゃうと全てのページから「.hoge」を設定している箇所を探し出して「.hogehoge」に書き換える必要がでてくる。

ページ数の都合上、全力で避けたい。

対策案４：B.cssの修正

「B.css」の「.hoge」を「.hogehoge」に書き換えれば解決なんだけど、「B.css」の修正は禁じ手とされている。

対策案５：別案

「A.css」の「.hoge」に別途、条件をつける。

まずは現状の確認。

• 「B.css」の修正は禁じ手
• 全てのページを修正する気はない

この現状から出来るコトは下記。

• 「A.css」の修正
• 「zebra.html」の修正

この２つから考えてみるコトにした。

結果

「A.css」と「zebra.html」の修正が可能なので、「特定の条件のみ適用しない」っていう記述にする。

説明しづらいので、まずは現状の記述。

「特定の条件のみ適用しない」ってのは下記のような感じ。

これで「class=”hoge”」は適用するけど「class=”hoge notClass”」は適用しないっていう記述になる。

結果

• 「A.css」で「class=”hoge notClass”」としているので「A.cssの.hoge」は適用されない
• 「B.css」の「.hoge」は適用される