CSS Reset 樣式重置

CSS Reset 是指一種將瀏覽器預設的樣式 清除 或 標準化 的技術，目的是讓不同瀏覽器在渲染網頁時的預設樣式表現一致，避免由於各瀏覽器內建樣式不同而導致的版面錯亂或不一致。

為什麼需要 CSS Reset？

如上方所述，每個瀏覽器都有內建的一套預設樣式。例如：

• <h1> 有預設的 font-size 和 margin。
• <ul> 和 <ol> 有預設的 padding 和 list-style。
• <a> 預設會是藍色並帶有底線。

不同瀏覽器這些預設值可能不同，會導致：

1. 不一致的間距。
2. 不一致的字體大小。
3. 難以控制的元素行為。

透過 CSS Reset，可以清除這些差異，讓開發者在一個乾淨、一致的起點開始設計樣式。

常見的 CSS Reset 方法

Eric Meyer`s Reset

為了解決這樣的困擾，世界知名的 CSS 大師 Eric 整理出一個很棒的解決方法 Reset CSS，做法是把所有瀏覽器最不一致的地方強制歸零，可以看到最一開始那一大串 HTML 標籤 的 margin、padding、border、outline 全都設為 0。優點是重置了各個瀏覽器的樣式設定；缺點是必須全部重新做設定，比較沒有彈性。適用於舊版瀏覽器（包含 IE）

MeyerWeb

Normalize.css

由於 Reset CSS 過度地將所有瀏覽器最不一致的地方強制歸零，或是將項目清單強制清除，導致原有的視覺特性都消失了。因此， Nicolas Gallagher 開發出了更精緻的 Reset 方法，不完全清除樣式，而是讓所有瀏覽器的表現一致。

• 保留有用的瀏覽器預設樣式，避免過度清除。
• 修正瀏覽器之間常見的樣式差異與錯誤。
• 改善可用性與易讀性，例如讓表單元素、標題等在各瀏覽器 下都能正常顯示。
• 透過詳細註解，說明每一段 CSS 的用途。

Normalize

自行定義

自行定義 CSS Reset 的原因主要是為了符合專案的需求，並依開發者的習慣，在不犧牲效能與維護性的情況下，打造一套 剛剛好 的初始樣式設定。

• 針對專案做 剛好需要 的重置，避免過度重置。
• 避免冗餘與重複定義，有助於維護和效能。
• 與 UI 設計系統更一致，可與 UI 設計風格無縫對接。
• 可以依據專案的實際需求進行擴充與維護。

總結

CSS Reset 是讓你的網頁設計在統一基礎上進行的關鍵第一步。選擇使用 MeyerWeb 還是 Normalize，取決於專案需求、目標瀏覽器、以及設計風格偏好。現代開發中，推薦使用 Normalize.css 或自訂簡化版的 reset 結合 box-sizing: border-box 等實用設定。