CSS reset的重新审视 – 避免样式重置
一、CSS reset（CSS重置）的歷史
根據(jù)淘寶射雕的敘述，最早的一份CSS reset來自Tantek 的undohtml.css，很簡單的代碼，Tantek 根據(jù)自己的需要，對瀏覽器的默認樣式進行了一些重置。
其余一些有名的CSS reset如業(yè)界領(lǐng)袖Eric Meyer的reset，或是Tripoli Reset。
CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準(zhǔn)，而這個基準(zhǔn)更多的就是“清零”！如下面常見但事實上極不推薦的代碼：
*{ margin:0; padding:0; }可以說，兼容性是CSS reset誕生的的主要原因之一，還有一方面的原因是類似于“庫”的作用。然而，這些又是我認為CSS reset這個概念應(yīng)該淘汰的原因。
二、CSS reset的濫用
物極必反，在集體主義的亞洲國家，從眾服從以及跟風(fēng)是相當(dāng)常見的，這在CSS reset的應(yīng)用上可見一般，Eric在其reset代碼頁面中提到：要根據(jù)您自己的要求做修改。然而，目前的狀態(tài)是（尤其一些中小型網(wǎng)站），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代碼我只能無奈的搖搖頭，浮躁的不嚴(yán)謹這些詞立馬涌現(xiàn)在我腦中。姑且先不說CSS reset這東西的出現(xiàn)以及推崇就是個錯誤，光看看這段樣式代碼，我就吐血三升了。我想，有類似這段樣式代碼的網(wǎng)站不在少數(shù)，但是卻是很屎的一段CSS樣式代碼。
1. div標(biāo)簽?zāi)J有margin值嗎？有padding值嗎？怎么會想到應(yīng)用div{margin:0; padding:0;}屬性呢？真是畫蛇添足，多此一舉。
2. dt標(biāo)簽有默認的margin與padding值就是0，這里為什么還要使用呢？
3. li標(biāo)簽?zāi)J有margin值嗎？有padding值嗎？壓根就沒有，也不自己測測，還沒事找事設(shè)置個li{margin:0; padding:0;}屬性，真是衰！
4. code標(biāo)簽是個屬于inline水平的元素，居然也扯到margin與padding的重置，真是好笑。
5. 還有，像form, input, button, textarea這樣子的表單元素，有margin值嗎？有padding值嗎？我真是不解！
6. fieldset, legend這兩個90年代的標(biāo)簽?zāi)愕木W(wǎng)站上使用了嗎？使用概率不足1%的標(biāo)簽也拿來重置，我實在無語了。
7. 還有th，td這些標(biāo)簽，幸好沒有寫上table與tr標(biāo)簽，否則我一起痛批一段。
在我看來，就算要CSS默認屬性要reset重置，也應(yīng)該如下：
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,li{margin:0; padding:0;}這樣子的CSS reset才是高效的，簡潔的，其他一些標(biāo)簽都要通通的去掉，完全沒有必要。
三、CSS reset的不足
CSS文件的大小
顯然，CSS reset平白無故的增加了CSS文件的大小，雖然，增加的大小可能有限，但是，要知道，即使0.1秒的載入時間差異也會影響互聯(lián)網(wǎng)企業(yè)的收入的。
樣式的重置
許多的CSS樣式要重寫與重新覆蓋，典型的多此一舉。
CSS的渲染
這可以說是最大的問題，樣式無緣無故增加了很多的渲染，想想看，一個項目或是一個頁面中有多少個div標(biāo)簽，居然使用div{margin:0; padding:0;}當(dāng)然，*{margin:0; padding:0;}更是無法容忍的。
四、CSS reset本沒有存在的必要
當(dāng)您靜下心來，審視你這幾年對CSS的使用，您再去思考CSS reset，從它的歷史，從它繁盛的原因，去思考CSS reset的本質(zhì)，標(biāo)簽的意義所在，您就會發(fā)現(xiàn)，CSS reset這個概念本不應(yīng)該流行與繁盛，雖然它有道理，但是實際上是個可有可無的東西。
我可以從多方面闡述我的觀點：
1. 那些所謂的需要重置的標(biāo)簽
我現(xiàn)在問您一個問題，在您制作的或參與開發(fā)的頁面中，h1~h6標(biāo)簽?zāi)褂昧藥讉€，我想不可能全部都使用吧，使用三種類型的標(biāo)題標(biāo)簽就不多了。您有必要對h1~h6所有標(biāo)簽都使用margin的清除嗎？ OK，我們現(xiàn)在換個角度思考，假如我們沒有對h1~h6標(biāo)簽設(shè)置{margin:0;}的重置怎么辦？從SEO的角度講，一個頁面最多只能出現(xiàn)一個h1標(biāo)簽，所以，顯然，h1標(biāo)簽的CSS reset完全沒有必要，頁面什么地方用就設(shè)置相應(yīng)的樣式，只要你記住，h1標(biāo)簽是有個默認的margin-top與margin-bottom值的，所以，我們就可以由這樣的屬性：
對比下CSS reset下的使用：
h1, h2, h3, h4, h5, h6{margin:0;} . . .h1{margin-top:10px;}使用CSS reset不僅文件大小增加了，CSS代碼屬性也發(fā)生了重置，CSS渲染也增加了。顯然不及沒有CSS reset來的高效。
您可能會說：“哎呀，小旭啊！你這里的h1標(biāo)簽是個特殊情況啊，是只出現(xiàn)一次的標(biāo)簽啊。
反駁地好，我們拿h4標(biāo)簽舉例說明CSS reset是個多余的東西。一個頁面上往往有很多個模塊，沒有模塊都有一個小小的標(biāo)簽，而這個標(biāo)題往往就使用h3或是h4標(biāo)簽，例如騰訊首頁的模塊選項卡標(biāo)題，如下圖：
我們看看騰訊頁面時如何對這個h4標(biāo)簽設(shè)置樣式的，見下圖：
上圖標(biāo)注部分，有個margin屬性，現(xiàn)在對比下面兩種樣式設(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; }通過對比可以發(fā)現(xiàn)，我的做法避免了右側(cè)margin值的重置，而且也節(jié)省了可能不會使用的h5,h6標(biāo)簽。就算這里的h4標(biāo)簽沒有margin值，我們可以直接設(shè)置margin:0;就好了，沒有任何的損失。CSS reset就是個可有可無，沒有最好的東西。
同樣的原理也可以應(yīng)用在ul,ol標(biāo)簽上，你說你使用ul列表進行列表元素的布局的時候，不會設(shè)置margin值與padding值嗎？既然可能要設(shè)置這些屬性，為何不在就在要使用它們的時候設(shè)置呢？沒有什么損失啊，反而可以避免不必要的渲染。
CSS reset就像是一種寧可錯殺三千不可放過一個的做法。
2. 那些所謂的兼容性
所謂兼容性，我想，大多數(shù)人都是聽別人說的，不同瀏覽器下標(biāo)簽的一些屬性有差異啊！我倒要問一問，哪些標(biāo)簽的默認屬性在不同瀏覽器下有差異？您可以花點時間想想。//zxx:假設(shè)您經(jīng)過了短暫的思考
我所知道的就是h1標(biāo)簽的文字的大小，在有些瀏覽器下大些，有些小些；然后就是一些margin值的些許偏差，然后還有呢？事實上，目前瀏覽器而言，對于這些默認標(biāo)簽的屬性其實差異是很少很小的，兼容性一說實在不能用在標(biāo)簽的默認屬性上。
回過來，就算有一些差異，為何非得在頭部已CSS reset的位置同一呢？當(dāng)需要的時候，在設(shè)置，又有什么差異呢，這樣，反而更直接，更高效！
3. CSS庫的概念
我認為，CSS reset是個非常尷尬的概念，這是與性能，優(yōu)化的概念是相悖的，但是，實際上，有時候它的存在似乎有一定的道理的，比如設(shè)置默認的a標(biāo)簽的屬性。不過，我們也可以不用CSS reset的概念來解釋它。如下面的代碼：
這樣子的代碼您想到了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庫的概念來解釋類似于a標(biāo)簽屬性設(shè)置的原因，這樣就可以避免CSS reset解釋的一些尷尬。其實想想，本來就是，這些屬性與.l{float:left;}.r{float:right;}庫樣式作用是一致的，方便高效的使用。對于CSS庫的概念，我的思考還不是很成熟，就提這么多。
五、少即是多
武俠的最高境界是什么？ – 無招勝有招
設(shè)計的最高境界是什么？ – 減少設(shè)計
所以，最少的CSS代碼，最少的渲染，最少的重置就是最好的CSS樣式代碼，這反應(yīng)了您的CSS層次。說句不好聽的話，CSS reset是用來讓那些CSS菜鳥，對CSS不太了解的人準(zhǔn)備的。
個人觀點，不要客氣，歡迎積極反駁，提出您的觀點。爭論中提高……
最后附上最近看到的一個相關(guān)的ppt(補充于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)載請注明來自張鑫旭-鑫空間-鑫生活[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的重新审视 – 避免样式重置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电子商务的安全机制及商务模式
- 下一篇： sharepoint 页面定制经验小结