複数テンプレートを使用してCSSの重複がある場合

Question

ページ全体（イメージとしてWPのテーマのようなものです）は例えばAというテンプレートが使用されていて
その中でinput要素だけはBというテンプレートを使用したいという場面があると思います。

ここで、Aにもすでにinput要素が定義されており、important等も置かれてしまっており
コピペでBを持ってきても両者が干渉してしまいます。

もちろん、chromeディベロッパーツールでどのスタイルが優先されているのかを一つずつ検証して
1からimportantを置き直す方法もあるのですが、かなりの重い作業です。。

実務的にまとめて特定のinput要素にはBだけを適用しするような有用な方法はございますでしょうか。

下記のようにAではinputも定義されているのですが、
Bを適用したいです。またinputだけなら良いのですが、様々なセレクタで
input周りのスタイルが定義されているので、すべて検証してBを優先させるのが
煩雑なので、まとめてBをすべてにおいて優先するだけではなく差分のA(input .foo)も適用したくないです。

コード

/*A*/

input {
border:none;!important
XXX;
XXX;!important
XXX;
}
input .hoge{
XXX;
XXX;!important
XXX;
}

input .foo{//Aにしか存在しないスタイルで適用したく無い
XXX
XXX!important
XXX
}

/*B*/
input{
border: 1px solid #fff000;
YYY;
YYY;
YYY;
YYY;
}

input .hoge{
YYY;
YYY;
YYY;
}

Answer 1

直接的な回答ではないのですが、
あまり!importantだらけのCSSは良いものとは言えません。
小手先でちょこちょこ直すのではなくスクラップアンドビルドで
最初から作り直したほうが実は早く確実で後々のメンテナンス性も含めてキレイに整理できるのではないでしょうか。
いずれにしてもそれぞれの役割とどこで使われているかの精査は必要ですが。

Comments

[SugiuraY]

コメント有難うございます。
承知を致しました。地道に確実なものを目指してみようと思います。
宜しくお願いいたします。

[m.ts10806]

大変かとは思いますが、がんばってください。