# CSS Reset vs CSS normalize

## CSS Reset

讓各個瀏覽器的CSS樣式有一個統一的基準，而實現這一基準最主要的方式就是「清零」。
* **[Reset CSS](https://meyerweb.com/eric/tools/css/reset/):** 此為 Eric Meyer 的版本
* **[HTML5 Reset Stylesheet](http://html5doctor.com/html-5-reset-stylesheet/):** HTML5 Doctor 網站修改自 Eric A. Meyer 的版本。
* **[CSS Reset](https://clarle.github.io/yui3/yui/docs/cssreset/):** YUI Library，由 Yahoo UI Library v3 所提供的 CSS Reset 版本。

做法是把所有瀏覽器最不一致的地方強制歸 0，可以看到最一開始那一大串 html tag 的 margin、padding、border、outline 全都設為 0。

- **優點:** 統整、重置了各個瀏覽器的樣式設定。
- **缺點:** 必須全部重新做設定，比較沒有彈性，而且在使用開發者工具時會看到一大坨的繼承鏈(inheritance chain)。

## CSS normalize
因為 reset.css 重置了各個瀏覽器的樣式設定，使得有些有用、常用標籤的默認樣式必須要重新設定，因為這個問題，有人開發出了 Normalize.css，Normalize.css 只是一個很小的CSS文件，但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。

**[Normalize.css](https://necolas.github.io/normalize.css/)**

1. 保留有用的瀏覽器默認設置，而不是將其刪除。
2. 為廣泛的 HTML 元素提供一般化的樣式。
3. 修復瀏覽器自身的bug並保證各瀏覽器的一致性。
4. 透過微妙的改善提高可用性，優化CSS可用性。
5. 有詳細的文檔來解釋代碼。(每個樣式都有註解是處理什麼問題。)

---

## 來源
1. https://ithelp.ithome.com.tw/articles/10196528
2. https://kknews.cc/zh-tw/code/mlr6vp9.html