前言

常に私たちのプロジェクトでは大量のライブラリが使用され、大量のライブラリが併存すると、衝突、上書きの問題が発生します.その中でJSライブラリの衝突問題はまだ際立っていない.責任あるJSライブラリは潜在的な衝突問題を解決するからだ.しかし、CSSライブラリは必ずしもそうではありません.特にUIフレームワークでは、inputラベルresetに直接スタイルを与え、他のライブラリを導入すると、他のライブラリのスタイルを破壊し、ページが腐ってしまう可能性があります.最も重要なのはCSSが役割ドメインの概念を持っていないので、衝突が発生しやすいことです.

解決策

例えば、あるライブラリ、そのコードは:input {width: 100%;}、こんなにキックアスです!こんなに簡単にすべてのinputを100%幅にして、覇気!しかし、他の倉庫はカビが生えた.どうしよう?
私のやり方は:
1、無責任なCSSライブラリを見つけるのは、一つだけではないかもしれませんが、一つだけでいいです.無責任なライブラリをあまり使う必要はありませんから.2、このライブラリを優先的に導入し、後のより厳格なライブラリを上書きしないようにします.3、もしそれが依然として他のライブラリに影响を与えたら、どうすれば、これは私达が今日讨论する问题で、私のやり方はこのライブラリに“作用域”をプラスして、もちろんCSSは作用域がなくて、しかし祖先の要素にクラスを设置して、変相して作用域を実现することができます.今私は.xxlib input{width: 100%}に変更しました.つまり、祖先元素が.xxlibのinputだけで、幅は100%です.4、先祖元素にクラスを加えた後も、より厳格なライブラリが現在のライブラリをカバーしている場合は、「より厳格な」ライブラリが本当により厳格であるかどうかを考えるべきです.5、より厳格なライブラリが現在のライブラリをカバーする問題を解決しなければならない場合は、.xxlib input{width: 100%}の.xxlibを#xxlibに変更することができ、このように優先度が高く、一般的には問題はありません.しかし、できるだけこのようなやり方を使わないでください.実践の中で多くのことを書くかもしれません.これは意味的に許されません.

操作

まずライブラリを導入するのは誰でもできますが、このライブラリをどのように修正して祖先クラスを追加しますか?これが問題です.
私のやり方は、SASSツールを使うことです.
仮定1:このライブラリにはscssソースファイルが提供されています.
通常、プライマリ・ファイル、つまりこのようなファイルを見つけることができます.

@import './themes/default/theme';
...
...

私はそれを次のように変更しました.

.xxlib {
@import './themes/default/theme';
...
...
}

すなわち、.xxlib {}で包み、gulpなどのツールでcssファイルを再生成すると、各セレクタは.xxlibで始まり、役割ドメインを限定することになる.
仮定2:このライブラリにはscssソースファイルが提供されていません
xxlibなど、配布用のファイルを探します.css、xxlibを探すこともできます.min.cssでもいいです.
その後、すべてのコードを.xxlib {}で包む、名前を付けて保存する.scssファイルをgulpなどのツールでcssファイルを再生成すると、仮定と同じ効果が得られます.
ここでは、他のライブラリと競合しないライブラリを最も簡単な方法で作成します.使うときは祖先元素を.xxlibの類に設定してください.
見てくれてありがとう.