重置還是不重置-這是個CSS問題
每個瀏覽器都有他自己的一個默認樣式。可以保證HTML在沒有自定義樣式的情況下也能被有據可循的渲染。你應該知道:未訪問的鏈接是藍色、訪問過的是紫色、strong標簽加粗顯示、H1的字號大一些。然后,各廠商就是喜歡讓我們的生活豐富多彩一點,然后每個瀏覽器的默認樣式都不相同。所以,你怎么能保證你的自定義樣式不會被瀏覽器的默認樣式影響呢?
CSS重置,這個方法通常用來清除瀏覽器內置的默認樣式。通常,所有的字體和line-height都設置為100%,margin、padding設置為0px,去掉border,列表也無樣式。
Eric Meyer的CSS重置方案是第一個也是被大家廣泛使用的。HTML5 doctor的HTML5 Reset Stylesheet也可以幫助設置一些新的元素。CSSReset.com還提供一些別的不錯的方案和文檔。
應該使用CSS重置嗎?
我隨便看了30個網站,其中大多數都使用了CSS重置。他的優點很明顯:
- 可以提供完全空白的畫布,然后你就可以自己定義相應的樣式了
- 開發更加有邏輯性:你只是添加樣式而不是移除和修改
- 瀏覽器的兼容性問題可以降到最小
盡管有這些優點,但是我還是不使用CSS重置。實際上,也不完全正確,我會使用margin和padding的重置,因為默認的實在是沒用:
這樣的寫法會影響到所有的標簽,有的開發者會告訴你這會讓CSS的渲染效率變低。但是我還沒遇到過這樣的問題。
我對CSS重置的主要疑問在于:
增加頁面的大小
大多數CSS重置文件都在2kb左右(未壓縮)。聽著不大,但是如果我的CSS總共才10kb,那么這就不是個小數字了。
額外的影響
CSS重置需要你去重置所有的元素,增加文件大小。有些時候,瀏覽器默認還是不錯的。字體大小,行間距,鏈接邊框以及列表樣式都還是不錯的。如果不行,我再單獨去改。
不同的瀏覽器渲染頁面也不同
沒有哪兩個瀏覽器渲染出來的頁面是完全相同,一像素不差的。CSS重置給人的感覺就好像要完成這個目標,其實不行。
個人以為,我不在乎Firefox下面的標題比IE下面的大2px,或者Opera的bold屬性比Chrome的更加好看,實際上,CSS重置也解決不了這個問題。
不否認對瀏覽器的測試
我不是太認可CSS重置在各瀏覽器下面的一致性。你必須在很多的設備和瀏覽器下面測試你的網站或者程序,才能定位到錯誤到底是你的代碼還是瀏覽器的問題。
跟我的工作習慣不同
我不太使用CSS框架。我很少能遇到可以在正在建設的網站中通用的CSS方案,我可能會從其他地方copy一些代碼過來,但是一般我還是喜歡從空文件開始寫。他完全是我的代碼,我能很快知道問題在哪。
雖然不是那么復雜,但是CSS框架中的重置代碼經常導致一些問題。
并不節省時間
CSS重置真的節省了你的開發時間?
在我被CSS重置的支持者攻擊之前,我先聲明,并不是永遠都不用。可能對你來說有用,但是對那些新的WEB開發人員是否同樣有用呢?當你要添加一個CSS重置代碼的時候,是真的有用呢還是只是一個習慣而已?
做一個測試,從你的網站里面去掉CSS重置的樣式,看看是否真的有顯著的不同?
你使用CSS重置嗎?是最近養成或者丟掉的習慣嗎?真的有用嗎?