一、CSS reset（CSS重置）的歷史

　　根據淘寶射雕的敘述，最早的一份CSS reset來自Tantek 的undohtml.css，很簡單的代碼，Tantek 根據自己的需要，對瀏覽器的默認樣式進行了一些重置。

　　其余一些有名的CSS reset如業界領袖Eric Meyer的reset，或是Tripoli Reset。

　　CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統一的基準，而這個基準更多的就是“清零”！如下面常見但事實上極不推薦的代碼：

*{ margin:0; padding:0; }

　　可以說，兼容性是CSS reset誕生的的主要原因之一，還有一方面的原因是類似于“庫”的作用。然而，這些又是我認為CSS reset這個概念應該淘汰的原因。

　　二、CSS reset的濫用

　　物極必反，在集體主義的亞洲國家，從眾服從以及跟風是相當常見的，這在CSS reset的應用上可見一般，Eric在其reset代碼頁面中提到：要根據您自己的要求做修改。然而，目前的狀態是（尤其一些中小型網站），CSS reset代碼直接拷貝過去，也不做一番思考，我真是哀其不幸，怒其不爭。我今天就見到了這么一行CSS reset代碼：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0; }

　　看到這樣子的CSS代碼我只能無奈的搖搖頭，浮躁的不嚴謹這些詞立馬涌現在我腦中。姑且先不說CSS reset這東西的出現以及推崇就是個錯誤，光看看這段樣式代碼，我就吐血三升了。我想，有類似這段樣式代碼的網站不在少數，但是卻是很屎的一段CSS樣式代碼。

　　1. div標簽默認有margin值嗎？有padding值嗎？怎么會想到應用div{margin:0; padding:0;}屬性呢？真是畫蛇添足，多此一舉。
　　2. dt標簽有默認的margin與padding值就是0，這里為什么還要使用呢？
　　3. li標簽默認有margin值嗎？有padding值嗎？壓根就沒有，也不自己測測，還沒事找事設置個li{margin:0; padding:0;}屬性，真是衰！
　　4. code標簽是個屬于inline水平的元素，居然也扯到margin與padding的重置，真是好笑。
　　5.還有，像form, input, button, textarea這樣子的表單元素，有margin值嗎？有padding值嗎？我真是不解！
　　6. fieldset, legend這兩個90年代的標簽你的網站上使用了嗎？使用概率不足1%的標簽也拿來重置，我實在無語了。
　　7.還有th，td這些標簽，幸好沒有寫上table與tr標簽，否則我一起痛批一段。

　　在我看來，就算要CSS默認屬性要reset重置，也應該如下：

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}   ol,li{margin:0; padding:0;}

　　這樣子的CSS reset才是高效的，簡潔的，其他一些標簽都要通通的去掉，完全沒有必要。

　　三、CSS reset的不足

　　CSS文件的大小
　　顯然，CSS reset平白無故的增加了CSS文件的大小，雖然，增加的大小可能有限，但是，要知道，即使0.1秒的載入時間差異也會影響互聯網企業的收入的。

　　樣式的重置
　　許多的CSS樣式要重寫與重新覆蓋，典型的多此一舉。

　　CSS的渲染
　　這可以說是最大的問題，樣式無緣無故增加了很多的渲染，想想看，一個項目或是一個頁面中有多少個div標簽，居然使用div{margin:0; padding:0;}當然，*{margin:0; padding:0;}更是無法容忍的。

　　四、CSS reset本沒有存在的必要

　　當您靜下心來，審視你這幾年對CSS的使用，您再去思考CSS reset，從它的歷史，從它繁盛的原因，去思考CSS reset的本質，標簽的意義所在，您就會發現，CSS reset這個概念本不應該流行與繁盛，雖然它有道理，但是實際上是個可有可無的東西。

　　我可以從多方面闡述我的觀點：

　　1.那些所謂的需要重置的標簽
　　我現在問您一個問題，在您制作的或參與開發的頁面中，h1~h6標簽您使用了幾個，我想不可能全部都使用吧，使用三種類型的標題標簽就不多了。您有必要對h1~h6所有標簽都使用margin的清除嗎？ OK，我們現在換個角度思考，假如我們沒有對h1~h6標簽設置{margin:0;}的重置怎么辦？從SEO的角度講，一個頁面最多只能出現一個h1標簽，所以，顯然，h1標簽的CSS reset完全沒有必要，頁面什么地方用就設置相應的樣式，只要你記住，h1標簽是有個默認的margin-top與margin-bottom值的，所以，我們就可以由這樣的屬性：

h1{margin:10px 0 0;}

　　對比下CSS reset下的使用：

h1, h2, h3, h4, h5, h6{margin:0;}
.
.
.
h1{margin-top:10px;}

　　使用CSS reset不僅文件大小增加了，CSS代碼屬性也發生了重置，CSS渲染也增加了。顯然不及沒有CSS reset來的高效。

　　您可能會說：“哎呀，小旭啊！你這里的h1標簽是個特殊情況啊，是只出現一次的標簽啊。

　　反駁地好，我們拿h4標簽舉例說明CSS reset是個多余的東西。一個頁面上往往有很多個模塊，沒有模塊都有一個小小的標簽，而這個標題往往就使用h3或是h4標簽，例如騰訊首頁的模塊選項卡標題，如下圖：

　　我們看看騰訊頁面時如何對這個h4標簽設置樣式的，見下圖：

　　上圖標注部分，有個margin屬性，現在對比下面兩種樣式設置：

h1, h2, h3, h4, h5, h6{margin:0;}

#finance h4, #car h4, #tech h4, #edu h4, #kid h4, #astro h4, #sports h4 {
float:left;
font-weight:200;
height:20px;
line-height:20px;
margin-right:1px;
overflow:hidden;
padding-top:3px;
text-align:center;
width:73px;
}

　　我的做法：

#finance h4, #car h4, #tech h4, #edu h4, #kid h4, #astro h4, #sports h4 {
float:left;
font-weight:200;
height:20px;
line-height:20px;
margin:0 0 0 1px;
overflow:hidden;
padding-top:3px;
text-align:center;
width:73px;
}

　　通過對比可以發現，我的做法避免了右側margin值的重置，而且也節省了可能不會使用的h5,h6標簽。就算這里的h4標簽沒有margin值，我們可以直接設置margin:0;就好了，沒有任何的損失。CSS reset就是個可有可無，沒有最好的東西。

　　同樣的原理也可以應用在ul,ol標簽上，你說你使用ul列表進行列表元素的布局的時候，不會設置margin值與padding值嗎？既然可能要設置這些屬性，為何不在就在要使用它們的時候設置呢？沒有什么損失啊，反而可以避免不必要的渲染。
CSS reset就像是一種寧可錯殺三千不可放過一個的做法。

　　2.那些所謂的兼容性
　　所謂兼容性，我想，大多數人都是聽別人說的，不同瀏覽器下標簽的一些屬性有差異啊！我倒要問一問，哪些標簽的默認屬性在不同瀏覽器下有差異？您可以花點時間想想。//zxx:假設您經過了短暫的思考
　　我所知道的就是h1標簽的文字的大小，在有些瀏覽器下大些，有些小些；然后就是一些margin值的些許偏差，然后還有呢？事實上，目前瀏覽器而言，對于這些默認標簽的屬性其實差異是很少很小的，兼容性一說實在不能用在標簽的默認屬性上。

　　回過來，就算有一些差異，為何非得在頭部已CSS reset的位置同一呢？當需要的時候，在設置，又有什么差異呢，這樣，反而更直接，更高效！

　　3. CSS庫的概念
　　我認為，CSS reset是個非常尷尬的概念，這是與性能，優化的概念是相悖的，但是，實際上，有時候它的存在似乎有一定的道理的，比如設置默認的a標簽的屬性。不過，我們也可以不用CSS reset的概念來解釋它。如下面的代碼：

body{margin:0; font:normal 12px/1.5 '宋體';}
a{color:#34538b;}

　　這樣子的代碼您想到了CSS reset嗎？

　　再看下面的代碼：

body{margin:0; font:normal 12px/1.5 '宋體';}
a{color:#34538b;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
img{border:0;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.r3{color:#f30;}
.wf{color:#fff;}
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vt{vertical-align:top;}
.vn{vertical-align:-2px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}……

　　這樣子您想到了CSS reset了嗎？看這里的a標簽屬性以及img屬性，我們發現我們可以用CSS庫的概念來解釋類似于a標簽屬性設置的原因，這樣就可以避免CSS reset解釋的一些尷尬。其實想想，本來就是，這些屬性　　與.l{float:left;}.r{float:right;}庫樣式作用是一致的，方便高效的使用。對于CSS庫的概念，我的思考還不是很成熟，就提這么多。

　　五、少即是多

　　武俠的最高境界是什么？–無招勝有招
　　設計的最高境界是什么？–減少設計
　　所以，最少的CSS代碼，最少的渲染，最少的重置就是最好的CSS樣式代碼，這反應了您的CSS層次。說句不好聽的話，CSS reset是用來讓那些CSS菜鳥，對CSS不太了解的人準備的。