開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。 解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。 不斷更新，不斷更新，不斷更新，重要的事情說三遍 ...
開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型
談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少
談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit
談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略
談談一些有趣的CSS題目（六）-- 全相容的多列均勻佈局問題
談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案
談談一些有趣的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~h6、ol、ul 這些擁有具體語義化的元素，一旦去掉了它們本身的特性，而又沒有賦予它們本身語義化該有的樣式（經常沒有），導致越來越多人弄不清它們的語義，側面來說，這也是現在越來越多的頁面上 div 滿天飛，缺乏語義化標簽的一個重要原因。
YUI 版本的 reset 不管高矮胖瘦，一刀切的方式，看似將所有元素統一在同一起跑線上，實則是多了很多冗餘代碼，得不償失。
所以，YUI 的 reset.css 的諸多問題，催生出了另一個版本的 reset.css ，名為 Normalize.css。
Normalize.css
Normalize.css 有著詳盡的註釋，由於篇幅太長，可以點開網址看看，本文不貼出全部代碼。
Normalize.css 與 reset.css 的風格恰好相反，沒有不管三七二一的一刀切，而是註重通用的方案，重置掉該重置的樣式（例如body的預設margin），保留該保留的 user agent 樣式，同時進行一些 bug 的修複，這點是 reset 所缺乏的。
Normalize.css 做了什麼
Normalize.css 註釋完整，每一段代碼都說明瞭作用，總結來說，它做了以下幾個工作（摘自官網）：
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
簡單翻譯一下，大概是：
- 統一了一些元素在所有瀏覽器下的表現，保護有用的瀏覽器預設樣式而不是完全清零它們，讓它們在各個瀏覽器下表現一致；
- 為大部分元素提供一般化的表現；
- 修複了一些瀏覽器的 Bug ，並且讓它們在所有瀏覽器下保持一致性；
- 通過一些巧妙的細節提升了 CSS 的可用性；
- 提供了詳盡的文檔讓開發者知道，不同元素在不同瀏覽器下的渲染規則；
真心建議各位抽時間讀一讀 Normalize.css 的源碼，加上註釋一共就 460 行，多瞭解瞭解各個瀏覽器歷史遺留的一些坑。
關於取捨
那麼，最後再討論下取捨問題。是否 Normalize.css 就真的比 reset.css 好呢？
也不見得，Normalize.css 中重置修複的很多 bug ，其實在我們的項目中十個項目不見得有一個會用得上，那麼這些重置或者修複，某種意義上而言也是所謂的冗餘代碼。
我覺得最重要的是，拒絕拿來主義，不要人云亦云，看見別人說這個 reset.css 好用，也不瞭解一下，拿來就上到項目中。又或者說寫代碼幾年了，知道每次都引用一個 reset ，卻從沒有去細緻瞭解其中每一句的含義。
關於維護
當團隊根據項目需要（可能混合部分了 reset 或者 normalize ）編寫了一份適合團隊項目的 reset 之後，隨著不斷的迭代或者說是復用，很有可能這個版本的 reset.css 會逐漸添加許多其他的全局性的樣式，從而又重新陷入上面說的那些問題。
所以我覺得，reset.css 也是需要維護的，關於最佳的 reset.css ，沒有一勞永逸的方案，根據項目靈活配置，做出取捨微調，適量裁剪和修改後再使用。
最後，搞技術的同學還是應該要有所追求，不要滿足於消費別人的總結，一定要去源頭看看。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
