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 页面定制经验小结