box model
為了加一個新功能仿畸，抄了部分頁面順帶一大坨 css 代碼救湖，結(jié)果原有部分頁面樣式就亂掉了刹孔。罪魁禍首就是兩者的盒模型不同（如上圖）泳秀，其中 W3C 模型也被成為 standards mode桌吃，IE 模型也被稱為 quirks mode朱沃。當然部分選擇器相同也產(chǎn)生了污染。
在調(diào)查原因的過程中茅诱，發(fā)現(xiàn)一個做法可以很好的分隔開不同來源的 css逗物。即在利用 less 的 mixin 特性，在新加入的 css 外套一層選擇器瑟俭，在這層選擇器內(nèi)定義相應的盒模型翎卓，然后將相關的 html 外也套一個對應的選擇器，這樣就完成了隔離摆寄。
舉個栗子失暴，A 站是 quirks mode，從該站抄來部分代碼如下
html
<div id="header">...</div>
...
css
#header { color: #6c94be;}
...
首先對 css 加入外層的自定義選擇器進行隔離椭迎，同時定義盒模型（本例為 quirks mode）
.site-a,
.site-a *,
.site-a *:before,
.site-a *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
#header { color: #6c94be;}
...
}
以上 less 部分編譯后生成的 css 將會限定在 .site-a 的子元素內(nèi)生效锐帜。
然后在相關 html 中也套入對應選擇器
<div class="site-a">
<div id="header>...</div>
...
</div>
這樣就隔離了新代碼對既存部分帶來的影響。
至于既存部分代碼對新代碼的影響畜号，因為新代碼外多套了一層選擇器優(yōu)先級更高缴阎，所以也不會受到任何影響。
