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

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

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

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

<a href="http://www.cnblogs.com/coco1s/p/5893921.html">談談一些有趣的CSS題目（一）-- 左邊豎條的實作方法</a>

<a href="http://www.cnblogs.com/coco1s/p/5895764.html">談談一些有趣的CSS題目（二）-- 從條紋邊框的實作談盒子模型</a>

<a href="http://www.cnblogs.com/coco1s/p/5899089.html">談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少</a>

<a href="http://www.cnblogs.com/coco1s/p/5908120.html">談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit</a>

<a href="http://www.cnblogs.com/coco1s/p/5911946.html">談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略</a>

<a href="http://www.cnblogs.com/coco1s/p/5915429.html" target="_blank">談談一些有趣的CSS題目（六）-- 全相容的多列均勻布局問題</a>

<a href="http://www.cnblogs.com/coco1s/p/5948383.html" target="_blank">談談一些有趣的CSS題目（七）-- 消失的邊界線問題</a>

<a href="http://www.cnblogs.com/coco1s/p/5955631.html" target="_blank">談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案</a>

<a href="http://www.cnblogs.com/coco1s/p/6026009.html">談談一些有趣的CSS題目（九）-- 巧妙的實作 CSS 斜線</a>

<a href="http://www.cnblogs.com/coco1s/p/6067305.html" target="_blank">談談一些有趣的CSS題目（十）-- 結構性僞類選擇器</a>

正文從這裡開始。 大部分的時候，作為前端，我們在寫 CSS 樣式之前，都知道需要添加一份 <code>reset.css</code> ，但是有深究過<code>reset.css</code> 每一句的人恐怕不多，其實其中也是有很多學問的，知己知彼，真正厘清它，對提高 CSS 大有裨益。

先來看看早先 YUI 的一個版本的 <code>reset.css</code>，這是一份曆史比較悠久的 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

<code>body, div, dl, dt, dd, ul, ol, li, h</code><code>1</code><code>, h</code><code>2</code><code>, h</code><code>3</code><code>, h</code><code>4</code><code>, h</code><code>5</code><code>, h</code><code>6</code><code>, </code><code>pre</code><code>, form, fieldset, input, textarea, p, blockquote, th, td {</code>

<code>    </code><code>margin</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>padding</code><code>: </code><code>0</code><code>;</code>

<code>}</code>

<code>table {</code>

<code>    </code><code>border-collapse</code><code>: </code><code>collapse</code><code>;</code>

<code>    </code><code>border-spacing</code><code>: </code><code>0</code><code>;</code>

<code>fieldset, img {</code>

<code>    </code><code>border</code><code>: </code><code>0</code><code>;</code>

<code>address, </code><code>caption</code><code>, cite, </code><code>code</code><code>, dfn, em, strong, th, var {</code>

<code>    </code><code>font-style</code><code>: </code><code>normal</code><code>;</code>

<code>    </code><code>font-weight</code><code>: </code><code>normal</code><code>;</code>

<code>ol, ul {</code>

<code>    </code><code>list-style</code><code>: </code><code>none</code><code>;</code>

<code>caption</code><code>, th {</code>

<code>    </code><code>text-align</code><code>: </code><code>left</code><code>;</code>

<code>h</code><code>1</code><code>, h</code><code>2</code><code>, h</code><code>3</code><code>, h</code><code>4</code><code>, h</code><code>5</code><code>, h</code><code>6</code> <code>{</code>

<code>    </code><code>font-size</code><code>: </code><code>100%</code><code>;</code>

<code>q:before, q:after {</code>

<code>    </code><code>content</code><code>: </code><code>''</code><code>;</code>

<code>abbr, acronym {</code>

首先，我們要知道 CSS RESET 的目的是什麼？是為了消除不同的浏覽器在預設樣式上不同表現，但是到今天，現代浏覽器在這方面的差異已經小了很多。

看看第一段：

這一條樣式的目的是在于，清除元素的預設 <code>margin</code> 和 <code>padding</code> 。

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

諸如 div 、dt、li 、th、td 等标簽是沒有預設 <code>padding</code> 和 <code>margin</code> 的；

如果我現在問你 fieldset 是什麼标簽，可能沒幾個人知道，相似的還有如 blockquote 、acronym 這種很生僻的标簽，在 html 代碼中基本不會出現的，其實沒太大必要 RESET ，隻會給每個項目徒增備援代碼；

上面的意思是，這一段代碼其實做了很多無用功！

要知道，CSS RESET 的作用域是全局的。我們都知道在腳本代碼中應該盡量避免濫用全局變量，但是在 CSS 上卻總是會忘記這一點，大量的全局變量會導緻項目大了之後維護起來非常的棘手。

再看看這一段：

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

好像沒什麼問題，但是諸如 h1~h6、ol、ul 這些擁有具體語義化的元素，一旦去掉了它們本身的特性，而又沒有賦予它們本身語義化該有的樣式（經常沒有），導緻越來越多人弄不清它們的語義，側面來說，這也是現在越來越多的頁面上 div 滿天飛，缺乏語義化标簽的一個重要原因。

YUI 版本的 reset 不管高矮胖瘦，一刀切的方式，看似将所有元素統一在同一起跑線上，實則是多了很多備援代碼，得不償失。

是以，YUI 的 reset.css 的諸多問題，催生出了另一個版本的 reset.css ，名為 Normalize.css。

Normalize.css 有着詳盡的注釋，由于篇幅太長，可以點開網址看看，本文不貼出全部代碼。

<a href="https://necolas.github.io/normalize.css/5.0.0/normalize.css">normalize.css v5.0.0</a>

Normalize.css 與 reset.css 的風格恰好相反，沒有不管三七二一的一刀切，而是注重通用的方案，重置掉該重置的樣式（例如body的預設margin），保留該保留的 user agent 樣式，同時進行一些 bug 的修複，這點是 reset 所缺乏的。

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 ，沒有一勞永逸的方案，根據項目靈活配置，做出取舍微調，适量裁剪和修改後再使用。

最後，搞技術的同學還是應該要有所追求，不要滿足于消費别人的總結，一定要去源頭看看。 到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。 本文轉自ChokCoco部落格園部落格，原文連結： http://www.cnblogs.com/coco1s/p/6249038.html