前言

經(jīng)常我們的項目中會使用大量的庫，大量的庫并存就產(chǎn)生了一個問題，就是沖突、覆蓋的問題。其中JS庫的沖突問題還不突出，因為一個負(fù)責(zé)任的JS庫都會解決潛在的沖突問題。但是CSS庫就不一定了，尤其是一些UI框架，它們往往追求用最少的CSS選擇器來管理最多的標(biāo)簽，比如直接就給input標(biāo)簽reset了樣式，然后你再引入其他庫的時候就很可能會破壞其他庫的樣式，導(dǎo)致頁面爛掉。最關(guān)鍵的是CSS并沒有作用域的概念，所以沖突很容易發(fā)生。

解決思路

比如，某個庫，它的代碼有：input {width: 100%;}，這么屌！這么簡單就把所有的input全設(shè)成了百分百寬度，霸氣！然而其他的庫就倒了霉了。怎么辦？

我的做法是：

1、找出不負(fù)責(zé)任的CSS庫，可能不止一個，但最好只有一個，因為沒必要用太多不負(fù)責(zé)任的庫。
2、優(yōu)先引入將這個庫，這樣它就不會覆蓋后面的更嚴(yán)謹(jǐn)?shù)膸臁?br> 3、如果它依然影響了其他的庫，怎么辦，這就是我們今天要討論的問題，我的做法是給這個庫加個“作用域”，當(dāng)然CSS是沒有作用域的，但是可以給祖先元素設(shè)置類，變相實現(xiàn)作用域?，F(xiàn)在我改成.xxlib input{width: 100%}，也就是只有祖先元素是.xxlib的input，寬度才是100%。
4、如果給祖先元素加了類之后，更嚴(yán)謹(jǐn)?shù)膸煲廊桓采w了現(xiàn)在的庫，那么其實我們就應(yīng)該考慮一下“更嚴(yán)謹(jǐn)”的庫是不是真的更嚴(yán)謹(jǐn)了。
5、假如必須解決更嚴(yán)謹(jǐn)?shù)膸旄采w現(xiàn)在的庫的問題，可以把.xxlib input{width: 100%}的.xxlib改成#xxlib，這樣它的優(yōu)先級更高，一般來講就不會有問題了。但是盡量不要用這種做法，因為實踐中你可能要寫很多個<div id="xxlib"></div>，這在語義上是不允許的。

操作

先引入一個庫誰都會，但是怎么修改這個庫，加祖先類呢？這就是個問題了。

我的做法是，用SASS工具。

假設(shè)一：該庫提供了scss源文件

這時候，通常你能找到一個主文件，也就是這樣的文件：

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

我把它改成：

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

也就是說把它用.xxlib {}包裹起來，然后用gulp等工具重新生成css文件，這時候，每一個選擇器都會以.xxlib開頭，等于限定了作用域。

假設(shè)二：該庫沒有提供scss源文件

這時候就去找用于分發(fā)的文件，比如xxlib.css，甚至可以找xxlib.min.css都是可以的。

然后，將所有代碼用.xxlib {}包裹起來，然后另存為.scss文件，然后用gulp等工具重新生成css文件，效果跟假設(shè)一是一樣的。

到此，我們就用最簡單的方法制作了一個不跟其他庫沖突的庫。用的時候記得把祖先元素設(shè)上.xxlib的類。

謝謝觀看。