CSS - CSS Reset vs CSS Normalize

CSS Reset

因近年來各家瀏覽器陸續出現，更有新舊版本的差異，所以會產生不同的預設樣式，如默認行高，邊距和各元素字體大小等方面的不一致，一個統一的預設樣式開始變得越來越重要。

最簡單粗暴的做法就是直接把所有的預設樣式強制歸 0，比如：

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

但是通用符號會匹配所有的標籤，如果開發的是大型網站，會大大加重網頁渲染時間，所以最好還是只對需要的標籤做修改。

CSS-Tricks 調查最多人使用的 Eric Meyer 的版本：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

https://meyerweb.com/eric/tools/css/reset/

---

CSS Normalize

因為 reset.css 重置了各個瀏覽器的樣式設定，使得有些有用、常用標籤的默認樣式必須要重新設定，因為這個問題，導致了 Normalize.css 的出現。

Normalize 最大的特色就是保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整。

Normalize.css 的目標：

保留有用的瀏覽器默認設置，而不是將其刪除。
為廣泛的 HTML 元素提供一般化的樣式。
修正瀏覽器的 Bug 與不一致。
透過微妙的改善提高可用性。
有詳細的文檔來解釋代碼。(每個樣式都有註解是處理什麼問題。)

http://nicolasgallagher.com/about-normalize-css/