談談一些有趣的CSS題目（十一）-- reset.css 知多少？

開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit

談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略

談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題

談談一些有趣的CSS題目（七）-- 消失的邊界線問題

談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案

談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

談談一些有趣的CSS題目（十）-- 結構性僞類選擇器

全部題目彙總在個人 Github 。

 

正文從這裏開始。 大部分的時候，做爲前端，咱們在寫 CSS 樣式以前，都知道須要添加一份 reset.css ，可是有深究過reset.css 每一句的人恐怕很少，其實其中也是有不少學問的，知己知彼，真正釐清它，對提升 CSS 大有裨益。

reset.css

先來看看早先 YUI 的一個版本的 reset.css，這是一份歷史比較悠久的 RESET 方案:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}

首先，咱們要知道 CSS RESET 的目的是什麼？是爲了消除不一樣的瀏覽器在默認樣式上不一樣表現，可是到今天，現代瀏覽器在這方面的差別已經小了不少。

 

reset.css 存在的問題

看看第一段：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

這一條樣式的目的是在於，清除元素的默認 margin 和 padding 。

可是這一段代碼是充滿問題的。

• 諸如 div 、dt、li 、th、td 等標籤是沒有默認 padding 和 margin 的；
• 若是我如今問你 fieldset 是什麼標籤，可能沒幾我的知道，類似的還有如 blockquote 、acronym 這種很生僻的標籤，在 html 代碼中基本不會出現的，其實沒太大必要 RESET ，只會給每一個項目徒增冗餘代碼；

上面的意思是，這一段代碼其實作了不少無用功！

要知道，CSS RESET 的做用域是全局的。咱們都知道在腳本代碼中應該儘可能避免濫用全局變量，可是在 CSS 上卻老是會忘記這一點，大量的全局變量會致使項目大了以後維護起來很是的棘手。

再看看這一段：

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}

這一段代碼，目的是統一了 h1~h6 的表現，取消了標題的粗體展現，取消了列表元素的項目點。

好像沒什麼問題，可是諸如 h1~h六、ol、ul 這些擁有具體語義化的元素，一旦去掉了它們自己的特性，而又沒有賦予它們自己語義化該有的樣式（常常沒有），致使愈來愈多人弄不清它們的語義，側面來講，這也是如今愈來愈多的頁面上 div 滿天飛，缺少語義化標籤的一個重要緣由。

YUI 版本的 reset 無論高矮胖瘦，一刀切的方式，看似將全部元素統一在同一塊兒跑線上，實則是多了不少冗餘代碼，得不償失。

因此，YUI 的 reset.css 的諸多問題，催生出了另外一個版本的 reset.css ，名爲 Normalize.css。

 

Normalize.css

Normalize.css 有着詳盡的註釋，因爲篇幅太長，能夠點開網址看看，本文不貼出所有代碼。

normalize.css v5.0.0

Normalize.css 與 reset.css 的風格剛好相反，沒有無論三七二一的一刀切，而是注重通用的方案，重置掉該重置的樣式（例如body的默認margin），保留該保留的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺少的。

 

Normalize.css 作了什麼

Normalize.css 註釋完整，每一段代碼都說明了做用，總結來講，它作了如下幾個工做（摘自官網）：

1. Preserves useful defaults, unlike many CSS resets.
2. Normalizes styles for a wide range of elements.
3. Corrects bugs and common browser inconsistencies.
4. Improves usability with subtle modifications.
5. Explains what code does using detailed comments.

簡單翻譯一下，大概是：

1. 統一了一些元素在全部瀏覽器下的表現，保護有用的瀏覽器默認樣式而不是徹底清零它們，讓它們在各個瀏覽器下表現一致；
2. 爲大部分元素提供通常化的表現；
3. 修復了一些瀏覽器的 Bug ，而且讓它們在全部瀏覽器下保持一致性；
4. 經過一些巧妙的細節提高了 CSS 的可用性；
5. 提供了詳盡的文檔讓開發者知道，不一樣元素在不一樣瀏覽器下的渲染規則；

真心建議各位抽時間讀一讀 Normalize.css 的源碼，加上註釋一共就 460 行，多瞭解瞭解各個瀏覽器歷史遺留的一些坑。

 

關於取捨

那麼，最後再討論下取捨問題。是否 Normalize.css 就真的比 reset.css 好呢？

也不見得，Normalize.css 中重置修復的不少 bug ，其實在咱們的項目中十個項目不見得有一個會用得上，那麼這些重置或者修復，某種意義上而言也是所謂的冗餘代碼。

我以爲最重要的是，拒絕拿來主義，不要人云亦云，看見別人說這個 reset.css 好用，也不瞭解一下，拿來就上到項目中。又或者說寫代碼幾年了，知道每次都引用一個 reset ，卻從沒有去細緻瞭解其中每一句的含義。

 

關於維護

當團隊根據項目須要（可能混合部分了 reset 或者 normalize ）編寫了一份適合團隊項目的 reset 以後，隨着不斷的迭代或者說是複用，頗有可能這個版本的 reset.css 會逐漸添加許多其餘的全局性的樣式，從而又從新陷入上面說的那些問題。

因此我以爲，reset.css 也是須要維護的，關於最佳的 reset.css ，沒有一勞永逸的方案，根據項目靈活配置，作出取捨微調，適量裁剪和修改後再使用。

最後，搞技術的同窗仍是應該要有所追求，不要知足於消費別人的總結，必定要去源頭看看。

 

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。