如何正确的抄网页

box model

为了加一个新功能，抄了部分页面顺带一大坨 css 代码，结果原有部分页面样式就乱掉了。罪魁祸首就是两者的盒模型不同（如上图），其中 W3C 模型也被成为 standards mode，IE 模型也被称为 quirks mode。当然部分选择器相同也产生了污染。

在调查原因的过程中，发现一个做法可以很好的分隔开不同来源的 css。即在利用 less 的 mixin 特性，在新加入的 css 外套一层选择器，在这层选择器内定义相应的盒模型，然后将相关的 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 的子元素内生效。

然后在相关 html 中也套入对应选择器

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

这样就隔离了新代码对既存部分带来的影响。
至于既存部分代码对新代码的影响，因为新代码外多套了一层选择器优先级更高，所以也不会受到任何影响。