同一ページに複数あるswiperのCSSの上書きについて

前提・実現したいこと

1ページ内に複数のswiperを用いて、
なおかつレスポンシブでswiperのONとOFFが切り替わるサイトを制作したい。

ファーストビューのスライダー → 全てのブレイクポイントでswiper適用
サービス一覧 → PCは一覧表示、SPはswiper適用
お知らせ → PCは一覧表示、SPはswiper適用

JavascriptはmatchMedia()でON/OFF切り替えができるから良いのですが、
CSSの出し分けについて質問させてください。
結果としては、実現しているのですが、他にスマートなやり方があるのかご教示頂けますと幸いです。

ソースコードが広範囲のため、コードなしで失礼します。

発生している問題・エラーメッセージ

JavascriptはmatchMedia()でswiperをON/OFFできるからいいのですが、
問題はCSSの方で、swiper-container、swiper-wrapper、slide-itemクラスにswiper.cssのスタイルが当たってしまいます。
その結果、サービス一覧とお知らせのPC表示時にレイアウトが崩れます。
単純にSPのメディアクエリをswiper.cssに追加すると、今度はファーストビューのPCでスタイルが当たらなくなります。
また、極力大元のswiper.cssに変更は加えない方がいいのかと思っています。

試したこと、現状の解決方法

swiper-container、swiper-wrapper、slide-itemクラスをそれぞれマルチクラスにし、
1つ1つスタイルを初期値に上書きました。(例えば、position: relativeをposition: staticに直したり)
その結果スタイルの打ち消しが大量発生してしまい、
見た目的にも管理的にもパフォーマンス的にも良くないんじゃないかと思っています。
実は他にスマートなやり方があるのではと質問をさせて頂きました。
たかだか3つのクラスの打ち消しなんて許容すべきなのでしょうか...