cssのコンフリクト

Question

非常にシンプルな質問なんですが、デザインにおいて複数の物を外部からDLしたものを利用する場合に
コンフリクトすることがあると思います。
例えば以下のようなケースで、全体のデザインはmain.cssで定義されており、
例えばbutton要素も定義されているのですが、実際にbutton要素だけに限っては
button.cssを利用したいというようなケースです。

このような場合、両者がコンフリクトしてしまい、button.cssが単純に導入できず、
デュベロッパーツールで検証しながら、適用したくないものは上書きして、どちらにも
存在するものはimportantを付してなど気の遠くなるような作業をしており、
もはや一から自分でパーツを作ったほうが早いような状況にいつも遭遇します。
もちろん、2つのソースだけならまだしも、複数ある場合にはもはや気絶です、、

例えばなのですが、.piyo要素だけにはmain.cssを適用しないような
除外的な処理は可能なのでしょうか？もちろん同一のページ内には基本的にはmain.cssを
適用していたいと言う状況です。

基本的なcssの運用方法に関する質問ですが、ご助言願います。

<link rel="stylesheet" href="../main.css"/> <!--button{color:#fff;border-style:dotted;} -->
<link rel="stylesheet" href="../button.css"/><!--.piyo{color:#000;}　
いちいち　コンフリクトを探して一つずつ!importantをつけたり、、、、
border-style:none!importantで打ち消したり、、大変です、、-->
<button class="piyo"></button>

Answer 1

CSS定義を一部だけ別の物に変えるにはWeb Componentsとか使う以外ないと思います。

【ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | ヌーラボ】
https://nulab-inc.com/ja/blog/cacoo/web-components/

【Web Componentsとは何か？】
https://qiita.com/jtakiguchi/items/b1315f53b3726ff11b61

通常はコーディング規約を共有するなどして CSSの定義時に他のライブラリと競合する様な書き方をしない、という方法が一般的かと思います。

Comments

[maguzo]

kei344様
ご回答ありがとうございます。
Web Componentsは早速調べ始めているのですが、一点、おっしゃる点がわからない箇所がありました。

>>通常はコーディング規約を共有するなどして CSSの定義時に他のライブラリと競合する様な書き方をしない、という方法が一般的かと思います。

こちらはそもそも外部ライブラリを利用することなどを前提にせずに、競合するようなスタイル構築を一からしないという意味合いでしょうか？
例えば外部ライブラリでbutton{}のような一般要素に対する定義をされてしまった時点でもはや絶対に将来的にどこかと競合してしまうため（もし複数のbuttonデザインを想定しているならですが）、例えばclassやidでしか指定しないという意味で、そのような書き方をしないということでしょうか。

ともすれば初めから外部ライブラリ、当初からどっぷり依存すること自体がすでに競合が避けられないという点で理解することができます。

もしbutton{}のような定義がなされている外部ライブラリを使用する上で、競合する様な書き方をしないという手段があり、それをさしていらっしゃるのであれば、それはどのようなことがをご教示いただければとても嬉しいです。
よろしくお願いいたします。

[kei344]

> 競合する様な書き方をしないという手段があり、
ありません。

[maguzo]

コメントありがとうございます。
大変勉強になりました、またWeb Componentsを見ていて衝撃を受けているのですが、自分でタグを定義することもできてしまうのですね、、確かにこれであれば、競合のリスクも減ると思いますが、複数人でコードを書くときはどこかに明確に定義しなければ混沌としそうですね。。
こちらは引き続き、今晩読み進めてみたいと思います。
何れにしても、ありがとうございました！