box model

為了加一個(gè)新功能，抄了部分頁(yè)面順帶一大坨 css 代碼，結(jié)果原有部分頁(yè)面樣式就亂掉了。罪魁禍?zhǔn)拙褪莾烧叩暮心Ｐ筒煌ㄈ缟蠄D），其中 W3C 模型也被成為 standards mode，IE 模型也被稱為 quirks mode。當(dāng)然部分選擇器相同也產(chǎn)生了污染。

在調(diào)查原因的過(guò)程中，發(fā)現(xiàn)一個(gè)做法可以很好的分隔開(kāi)不同來(lái)源的 css。即在利用 less 的 mixin 特性，在新加入的 css 外套一層選擇器，在這層選擇器內(nèi)定義相應(yīng)的盒模型，然后將相關(guān)的 html 外也套一個(gè)對(duì)應(yīng)的選擇器，這樣就完成了隔離。

舉個(gè)栗子，A 站是 quirks mode，從該站抄來(lái)部分代碼如下

html

<div id="header">...</div>
...

css
#header { color: #6c94be;}
...

首先對(duì) css 加入外層的自定義選擇器進(jìn)行隔離，同時(shí)定義盒模型（本例為 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 將會(huì)限定在 .site-a 的子元素內(nèi)生效。

然后在相關(guān) html 中也套入對(duì)應(yīng)選擇器

<div class="site-a">
  <div id="header>...</div>
  ...
</div>

這樣就隔離了新代碼對(duì)既存部分帶來(lái)的影響。
至于既存部分代碼對(duì)新代碼的影響，因?yàn)樾麓a外多套了一層選擇器優(yōu)先級(jí)更高，所以也不會(huì)受到任何影響。