跳到主要內容
前端開發

CSS Reset 與 Normalize.css 筆記

2020 年整理的 CSS Reset、Normalize.css 與 Sass 引入方式。

W

開始製作專案時,習慣先將瀏覽器的預設樣式清空,以免撰寫 CSS 時出現不一致。 清空方式很多,也可以自己手寫,這邊記錄當時常用的兩種選擇。

Reset CSS

Normalize.css

  • 會保留部分預設樣式,並清除瀏覽器之間多餘或不一致的設定。當時較常使用這一套,Bootstrap 也有採用。 Normalize.css

使用方式

選擇一套習慣的方案,下載後可以直接把 CSS 檔改成 _xxx.scss,再匯入主要的 SCSS 檔案。

SCSS 入口檔使用 import 引入 normalize、animate、變數與 mixin 等檔案

2026 年後記

這兩套方案仍可使用;現代瀏覽器也可以搭配更精簡的 reset,整理在《現在的 CSS Reset》。Sass 的 @import 已有新的模組寫法,這篇保留當時的專案結構。

分享這篇