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

根據(jù)淘寶射雕的敘述，最早的一份CSS reset來(lái)自Tantek 的undohtml.css，很簡(jiǎn)單的代碼，Tantek 根據(jù)自己的需要，對(duì)瀏覽器的默認(rèn)樣式進(jìn)行了一些重置。

其余一些有名的CSS reset如業(yè)界領(lǐng)袖Eric Meyer的reset，或是Tripoli Reset。

CSS reset的作用是讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)，而這個(gè)基準(zhǔn)更多的就是“清零”！如下面常見(jiàn)但事實(shí)上極不推薦的代碼：

*{ margin:0; padding:0; }

可以說(shuō)，兼容性是CSS reset誕生的的主要原因之一，還有一方面的原因是類似于“庫(kù)”的作用。然而，這些又是我認(rèn)為CSS reset這個(gè)概念應(yīng)該淘汰的原因。

二、CSS reset的濫用

物極必反，在集體主義的亞洲國(guó)家，從眾服從以及跟風(fēng)是相當(dāng)常見(jiàn)的，這在CSS reset的應(yīng)用上可見(jiàn)一般，Eric在其reset代碼頁(yè)面中提到：要根據(jù)您自己的要求做修改。然而，目前的狀態(tài)是（尤其一些中小型網(wǎng)站），CSS reset代碼直接拷貝過(guò)去，也不做一番思考，我真是哀其不幸，怒其不爭(zhēng)。我今天就見(jiàn)到了這么一行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代碼我只能無(wú)奈的搖搖頭，浮躁的不嚴(yán)謹(jǐn)這些詞立馬涌現(xiàn)在我腦中。姑且先不說(shuō)CSS reset這東西的出現(xiàn)以及推崇就是個(gè)錯(cuò)誤，光看看這段樣式代碼，我就吐血三升了。我想，有類似這段樣式代碼的網(wǎng)站不在少數(shù)，但是卻是很屎的一段CSS樣式代碼。

1. div標(biāo)簽?zāi)J(rèn)有margin值嗎？有padding值嗎？怎么會(huì)想到應(yīng)用div{margin:0; padding:0;}屬性呢？真是畫(huà)蛇添足，多此一舉。
2. dt標(biāo)簽有默認(rèn)的margin與padding值就是0，這里為什么還要使用呢？
3. li標(biāo)簽?zāi)J(rèn)有margin值嗎？有padding值嗎？壓根就沒(méi)有，也不自己測(cè)測(cè)，還沒(méi)事找事設(shè)置個(gè)li{margin:0; padding:0;}屬性，真是衰！
4. code標(biāo)簽是個(gè)屬于inline水平的元素，居然也扯到margin與padding的重置，真是好笑。
5. 還有，像form, input, button, textarea這樣子的表單元素，有margin值嗎？有padding值嗎？我真是不解！
6. fieldset, legend這兩個(gè)90年代的標(biāo)簽?zāi)愕木W(wǎng)站上使用了嗎？使用概率不足1%的標(biāo)簽也拿來(lái)重置，我實(shí)在無(wú)語(yǔ)了。
7. 還有th，td這些標(biāo)簽，幸好沒(méi)有寫(xiě)上table與tr標(biāo)簽，否則我一起痛批一段。

在我看來(lái)，就算要CSS默認(rèn)屬性要reset重置，也應(yīng)該如下：

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

這樣子的CSS reset才是高效的，簡(jiǎn)潔的，其他一些標(biāo)簽都要通通的去掉，完全沒(méi)有必要。

三、CSS reset的不足

CSS文件的大小
顯然，CSS reset平白無(wú)故的增加了CSS文件的大小，雖然，增加的大小可能有限，但是，要知道，即使0.1秒的載入時(shí)間差異也會(huì)影響互聯(lián)網(wǎng)企業(yè)的收入的。

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

CSS的渲染
這可以說(shuō)是最大的問(wèn)題，樣式無(wú)緣無(wú)故增加了很多的渲染，想想看，一個(gè)項(xiàng)目或是一個(gè)頁(yè)面中有多少個(gè)div標(biāo)簽，居然使用div{margin:0; padding:0;}當(dāng)然，*{margin:0; padding:0;}更是無(wú)法容忍的。

四、CSS reset本沒(méi)有存在的必要

當(dāng)您靜下心來(lái)，審視你這幾年對(duì)CSS的使用，您再去思考CSS reset，從它的歷史，從它繁盛的原因，去思考CSS reset的本質(zhì)，標(biāo)簽的意義所在，您就會(huì)發(fā)現(xiàn)，CSS reset這個(gè)概念本不應(yīng)該流行與繁盛，雖然它有道理，但是實(shí)際上是個(gè)可有可無(wú)的東西。

我可以從多方面闡述我的觀點(diǎn)：

1. 那些所謂的需要重置的標(biāo)簽
我現(xiàn)在問(wèn)您一個(gè)問(wèn)題，在您制作的或參與開(kāi)發(fā)的頁(yè)面中，h1~h6標(biāo)簽?zāi)褂昧藥讉€(gè)，我想不可能全部都使用吧，使用三種類型的標(biāo)題標(biāo)簽就不多了。您有必要對(duì)h1~h6所有標(biāo)簽都使用margin的清除嗎？ OK，我們現(xiàn)在換個(gè)角度思考，假如我們沒(méi)有對(duì)h1~h6標(biāo)簽設(shè)置{margin:0;}的重置怎么辦？從SEO的角度講，一個(gè)頁(yè)面最多只能出現(xiàn)一個(gè)h1標(biāo)簽，所以，顯然，h1標(biāo)簽的CSS reset完全沒(méi)有必要，頁(yè)面什么地方用就設(shè)置相應(yīng)的樣式，只要你記住，h1標(biāo)簽是有個(gè)默認(rèn)的margin-top與margin-bottom值的，所以，我們就可以由這樣的屬性：

h1{margin:10px 0 0;}

對(duì)比下CSS reset下的使用：

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

使用CSS reset不僅文件大小增加了，CSS代碼屬性也發(fā)生了重置，CSS渲染也增加了。顯然不及沒(méi)有CSS reset來(lái)的高效。

您可能會(huì)說(shuō)：“哎呀，小旭啊！你這里的h1標(biāo)簽是個(gè)特殊情況啊，是只出現(xiàn)一次的標(biāo)簽啊。

反駁地好，我們拿h4標(biāo)簽舉例說(shuō)明CSS reset是個(gè)多余的東西。一個(gè)頁(yè)面上往往有很多個(gè)模塊，沒(méi)有模塊都有一個(gè)小小的標(biāo)簽，而這個(gè)標(biāo)題往往就使用h3或是h4標(biāo)簽，例如騰訊首頁(yè)的模塊選項(xiàng)卡標(biāo)題，如下圖：

我們看看騰訊頁(yè)面時(shí)如何對(duì)這個(gè)h4標(biāo)簽設(shè)置樣式的，見(jiàn)下圖：

上圖標(biāo)注部分，有個(gè)margin屬性，現(xiàn)在對(duì)比下面兩種樣式設(shè)置：

騰訊做法：

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; }

通過(guò)對(duì)比可以發(fā)現(xiàn)，我的做法避免了右側(cè)margin值的重置，而且也節(jié)省了可能不會(huì)使用的h5,h6標(biāo)簽。就算這里的h4標(biāo)簽沒(méi)有margin值，我們可以直接設(shè)置margin:0;就好了，沒(méi)有任何的損失。CSS reset就是個(gè)可有可無(wú)，沒(méi)有最好的東西。

同樣的原理也可以應(yīng)用在ul,ol標(biāo)簽上，你說(shuō)你使用ul列表進(jìn)行列表元素的布局的時(shí)候，不會(huì)設(shè)置margin值與padding值嗎？既然可能要設(shè)置這些屬性，為何不在就在要使用它們的時(shí)候設(shè)置呢？沒(méi)有什么損失啊，反而可以避免不必要的渲染。
CSS reset就像是一種寧可錯(cuò)殺三千不可放過(guò)一個(gè)的做法。

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

回過(guò)來(lái)，就算有一些差異，為何非得在頭部已CSS reset的位置同一呢？當(dāng)需要的時(shí)候，在設(shè)置，又有什么差異呢，這樣，反而更直接，更高效！

3. CSS庫(kù)的概念
我認(rèn)為，CSS reset是個(gè)非常尷尬的概念，這是與性能，優(yōu)化的概念是相悖的，但是，實(shí)際上，有時(shí)候它的存在似乎有一定的道理的，比如設(shè)置默認(rèn)的a標(biāo)簽的屬性。不過(guò)，我們也可以不用CSS reset的概念來(lái)解釋它。如下面的代碼：

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標(biāo)簽屬性以及img屬性，我們發(fā)現(xiàn)我們可以用CSS庫(kù)的概念來(lái)解釋類似于a標(biāo)簽屬性設(shè)置的原因，這樣就可以避免CSS reset解釋的一些尷尬。其實(shí)想想，本來(lái)就是，這些屬性與.l{float:left;}.r{float:right;}庫(kù)樣式作用是一致的，方便高效的使用。對(duì)于CSS庫(kù)的概念，我的思考還不是很成熟，就提這么多。

五、少即是多

武俠的最高境界是什么？ – 無(wú)招勝有招
設(shè)計(jì)的最高境界是什么？ – 減少設(shè)計(jì)
所以，最少的CSS代碼，最少的渲染，最少的重置就是最好的CSS樣式代碼，這反應(yīng)了您的CSS層次。說(shuō)句不好聽(tīng)的話，CSS reset是用來(lái)讓那些CSS菜鳥(niǎo)，對(duì)CSS不太了解的人準(zhǔn)備的。

個(gè)人觀點(diǎn)，不要客氣，歡迎積極反駁，提出您的觀點(diǎn)。爭(zhēng)論中提高……

最后附上最近看到的一個(gè)相關(guān)的ppt(補(bǔ)充于2010-04-27)：

CSS Reset

View more presentations from Russ Weakley.

參考文章：
1. Reset CSS 研究（技術(shù)篇）
2. No CSS Reset
3. To CSS Reset or Not to CSS Reset

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=758

轉(zhuǎn)載于:https://www.cnblogs.com/HeroBeast/archive/2010/10/08/1845602.html

總結(jié)

以上是生活随笔為你收集整理的CSS reset的重新审视 – 避免样式重置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。