Reset CSS研究（八卦篇） - 以及取得FireFox預設CSS文件的方法

不是歷史

2004年，遙遠又如近在眼前的昨天，Tantek被不同瀏覽器下默認樣式的差異搞煩了，於是琢磨中寫了一個undohtml.css, 這就是第一個八卦問題的答案。

對於基於Gecko引擎的Firefox等瀏覽器，請在地址欄中輸入resource://gre/res/html.css，默認樣式就這樣裸體著呈現在面前了。CSS界的Guru級人物Eric Meyer立刻就嗅探到了html.css的有趣性：Really Undoing html.css. 知道CSS好玩，實在沒想到CSS居然這麼好玩。比如style, script { display: block }就可以顯示CSS和JS源碼，在做代碼演示的demo頁時，就不用辛辛苦苦用pre或textarea了（雖然因為ie不支持導致不實用，不過這的確是個思路）。

繼續八卦：CSS Negotiation and a Sanity Saving Shortcut. * { margin: 0; padding: 0 }的學名是Global White Space Reset. 從原文中可以看出這個方法剛問世時是非常火爆的，並且作者建議一定要先破後立，要將清掃差異和重置默認樣式結合起來，這樣才是正確的做法。

為何Global White Space Reset當初風光一時，如今卻黯然銷魂？* { margin: 0; padding: 0 }的 成功之處在於，管你三七二十八，統統抹平，人人生而平等！然而其失敗之處也正是因為其威力太大，雖然搗了蜂窩得了蜜，卻惹來群蜂追尾，麻煩無限（因為被抹 平的樣式，你得再重新設置回來，比如input的padding等）。這就如西漢一代名將韓信哪，是成也蕭何，敗也蕭何！

還有一個傳說中的說法是，星號*選擇符還會導致性能問題。由於一直沒找到可靠的資料，我又不知道怎樣才能測試CSS選擇符的渲染性能（知道的請一定告訴我），這個傳說中的性能問題就只能當它是傳說了。

眨眼一瞬間，三年就過去了。2007年，Eric Meyer的一篇文章Reset Styles, 重新喚起了一股reset熱潮。這篇文章裡有第3個八卦問題的答案：Eric的reset.css是源自YUI的，可能是母子關係，但總之不是情侶關係。

很快，Eric發佈了第二版：Reworked Reset. 後面的解釋極具價值，很多屬性值的設置在這裡有詳盡說明。

火爆的回覆給了Eric源源不斷的動力：Reset Reloaded. 看完這篇文章，有一種塵埃落定的感覺。

但上面的文章並不是最終版本，2008年2月份，Eric Meyer還更新了一次：CSS Tools: Reset CSS

說完Eric Meyer的心路歷程，不得不提一下YUI Reset CSS. 創始人是Nate Kokechley. 去年北京D2論壇上還見過一面，前不久已離開YAHOO，讓我的直覺裡對YUI都有點擔心起來了，唉。

上面是兩個最有名的CSS Reset方案。但世界永遠是多樣化的，比如Less is more – my choice of Reset CSS. 這和Eric Meyer的期望其實是一致的：不同的應用環境下，應該選擇自己的reset方案，而不是簡單的copy過去。比如Google首頁，在這種特定頁面裡，不用就是一種最好的用。

更多眼花繚亂的Reset方案請參看：A Killer Collection of Global CSS Reset Styles. 很標題黨，內容就魚龍混雜了。

最後，隆重揭曉最後一個八卦問題的答案：No CSS Reset. 提倡的核心思想也是Less is more. 原因很簡單，* { margin: 0; padding: 0 }殺傷力太大，在某些場合下，Eric Meyer的方案殺傷力也還是太大了。有想法並說出來，總是好的。

有反對就會有支持：Why I Like (and Use) Reset CSS. 公說公有理，婆說婆有理，並非所有問題都需要一個確切的答案，有時過程本身，就是追求的結果。

Eric Meyer對No CSS Reset一文的回覆：Crafting Ourselves. 讀罷此文，明月松間照，清泉石上流。下面摘錄兩段，做為此八卦閒文的完結：

Because this isn't a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that's knowing your craft. That's being a craftsman/craftswoman. It's a never-ending process that is all the more critical precisely because it is never-ending.

…It's evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.

預告：下一篇是技術篇，將詳細探討淘寶目前使用的Reset CSS方案，歡迎各位提前準備好板磚，我已購買堅固頭盔一頂…… 敬請期待。

參考資料

• Really Undoing html.css（最早的時候叫做undohtml.css）
• CSS Negotiation and a Sanity Saving Shortcut（* { margin: 0; padding: 0 } 的源頭）
• Reset Reasoning
• Reset Styles（Eric Reset CSS的源頭貼）
• Reworked Reset（勤快的Eric）
• Reset Reloaded（趨於穩定）
• CSS Tools: Reset CSS（這就是廣為流傳的Eric Meyer版reset css）
• YUI Reset CSS（和Eric Meyer版齊名的YUI方案）
• CSS techniques I use all the time
• Less is more – my choice of Reset CSS （永遠不缺個性化的聲音）
• A Killer Collection of Global CSS Reset Styles（大千世界，大開眼界）
• Tripoli – a CSS standard for HTML rendering（據說也是比較流行的一個方案）
• * { margin: 0; padding: 0; } No Longer Cool（提到了傳說中的性能問題）
• No CSS Reset（反對的聲音非常響亮）
• Why I Like (and Use) Reset CSS（支持的聲音更加嘹喨）
• Crafting Ourselves（Eric Meyer對No CSS Reset的回應，非常好的一篇文章）
• CSS Tip #1: Resetting Your Styles with CSS Reset（描述了CSS Reset的需求及其發展史，是一篇非常不錯的總結貼）
• 打造自己的reset.css（國人對reset.css的研究和總結，非常不錯）