WEB標準之CSS 打造自己的reset.css
2024-07-11 08:26:43
供稿：網友
0，引言
每每有新項目，第一步就是應當使用一個reset.css來重置樣式。濫用不如不用，直接拿個現成的reset.css過來將導致后期各種離奇bug的發生。
所以最好還是自己寫一個reset.css，并且要明白每一條 reset都是用來做什么的。
reset.css本意就是重置樣式，我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css。
具體如何規劃網站CSS結構，不在文本討論之列，可以參考Smashing Magazine上的文章，國內有差強人意的中文譯版。
注意，本文把reset分成了兩個部分，一個是純reset.css，可以用于任何項目。另一個是用于特定項目的“reset”，自定義修改的內容，這 些內容可以放在layout.css、typography.css之類的文件中，他們共同導入到一個base.css形成一個項目的基礎樣式。
本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設置玩reset.css之后需要針對不同項目要首先要設置的內容。
1，基礎
牛頓是站在巨人伽利略的肩膀上的，我們也可以這么做。首先我們要選定一個前進的基礎。
請永遠不要使用
* { margin: 0; padding: 0; }
這問題太多了，在此不多加表述。
目前比較流行的有Eric Meyer的重置樣式和YUI的重置樣式。另有Condensed Meyer Reset簡化Eric Meyer的樣式。有趣的是，Eric的重置樣式也是源于YUI的。而那份簡化版又把Eric的樣式簡化回YUI的樣式了 。但同時，糟糕的是，網上流傳的比較廣的(尤其是國內)都不是最新的版本。
上面兩個頁面里直接看到的都不是最新的，Eric專門為有 一個reset.css頁面。而YUI當前版本(2.7.0)的reset.css實際地址里，比上面的頁面中還多一些東西。此外，我們還可以基于一些常 見的框架，比較著名的比如Blueprint或者Elements CSS Framework（這個的reset也是源自于Eric Meyer的）。
OK，準備工作就差不多了。以上這些都可以作為參考資料來組織我們自己的reset。我這里主要采用YUI，兼帶Eric的reset。
2，默認色彩
對于頁面是不是有默認背景色和前景色，YUI和Eric有著不同的看法。
YUI重置背景色為白色而文字顏色為黑色。
html {
color: #000;
background: #FFF;
}
而Eric在當前最新版中讓所有顏色為透明，他認為透明才是最原始的顏色。雖然他曾一度認為也應當設置白色背景色、黑色文字顏色。至于最后為什么改了，Eric并沒有給出具體理由。
這個問題我基本認為是用戶自定義的更重要還是你的設計更重要的問題。我個人的觀點是，如果你的設計本身就是白色背景，那么不要設置背景。一小部分中高水平的用戶，他們會自定義網頁默認背景色。
