大部分的時候，作為前端，我們在寫 CSS 樣式之前，都知道需要新增一份 reset.css ，但是有深究過reset.css 每一句的人恐怕不多，其實其中也是有很多學問的，知己知彼，真正釐清它，對提高 CSS 大有裨益。
reset.css
先來看看早先 YUI 的一個版本的 reset.css，這是一份歷史比較悠久的 RESET 方案:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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 存在的問題
看看第一段：
|
1 2 3 4 |
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 上卻總是會忘記這一點，大量的全域性變數會導致專案大了之後維護起來非常的棘手。
再看看這一段：
|
1 2 3 4 5 6 7 |
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 ，沒有一勞永逸的方案，根據專案靈活配置，做出取捨微調，適量裁剪和修改後再使用。
最後，搞技術的同學還是應該要有所追求，不要滿足於消費別人的總結，一定要去源頭看看。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
所有題目彙總在我的 Github 。
- 有趣的CSS題目（1）： 左邊豎條的實現方法
- 有趣的CSS題目（2）： 從條紋邊框的實現談盒子模型
- 有趣的CSS題目（3）： 層疊順序與堆疊上下文知多少
- 有趣的CSS題目（4）： 從倒影說起，談談 CSS 繼承 inherit
- 有趣的CSS題目（5）： 單行居中，兩行居左，超過兩行省略
- 有趣的CSS題目（6）： 全相容的多列均勻佈局問題
- 有趣的CSS題目（7）：消失的邊界線問題
- 有趣的CSS題目（8）：純CSS的導航欄Tab切換方案
- 有趣的CSS題目（9）：巧妙實現 CSS 斜線
- 有趣的CSS題目（10）：結構性偽類選擇器
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
