Bài 26: Reset CSS & Normalize CSS – giúp trình duyệt đồng nhất

Khi bạn viết CSS và thử trên nhiều trình duyệt (Chrome, Firefox, Safari…), bạn sẽ thấy một số thành phần bị hiển thị không giống nhau, ví dụ:

• Thẻ h1 to hơn hoặc cách lề khác nhau
• Button có viền hoặc padding lạ
• Input hiển thị font khác…

Lý do là vì mỗi trình duyệt đều có một bộ CSS mặc định riêng, gọi là User Agent Stylesheet. Để loại bỏ sự khác biệt đó, chúng ta cần:

• Reset CSS: xóa sạch mọi định dạng mặc định
• Normalize CSS: giữ lại những định dạng hợp lý và làm đồng nhất trên các trình duyệt

---

1. Reset CSS là gì?

Reset CSS là kỹ thuật xóa toàn bộ style mặc định của trình duyệt để bạn có thể viết lại từ đầu theo ý muốn.

Ví dụ Reset CSS phổ biến:

📋 Copy/* Reset đơn giản */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Reset đầy đủ hơn (do Eric Meyer đề xuất):

📋 Copyhtml, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
... {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

---

2. Normalize CSS là gì?

Normalize CSS là file CSS giúp đồng nhất các thành phần HTML mặc định giữa các trình duyệt, nhưng không xóa toàn bộ như Reset.

Nó giữ lại những định dạng hợp lý, ví dụ:

• Giữ kích thước chữ mặc định
• Giữ kiểu hiển thị của sup, sub, mark, v.v.
• Căn chỉnh font chữ đồng nhất giữa các hệ thống

---

3. So sánh Reset vs Normalize

Tiêu chí	Reset CSS	Normalize CSS
Mục tiêu	Xóa toàn bộ style mặc định	Làm đồng nhất nhưng giữ style cơ bản
Tác động	Mạnh – xóa sạch mọi định dạng	Nhẹ – hiệu chỉnh cụ thể
Dễ kiểm soát	Cần viết lại từ đầu tất cả style	Giữ lại những gì hợp lý
Phù hợp khi nào	Dự án tùy chỉnh sâu, framework riêng	Dự án cần giao diện nhanh, ổn định

---

4. Cách dùng Reset CSS trong dự án

Bạn có thể thêm vào đầu file CSS của mình:

📋 Copy/* reset.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Hoặc nhúng vào file chính:

📋 Copy<link rel="stylesheet" href="reset.css">

---

5. Cách dùng Normalize CSS

Tải file normalize.css và thêm vào:

📋 Copy<link rel="stylesheet" href="normalize.css">

Nó sẽ định dạng lại:

• Headings
• Lists
• Form controls
• Tables
• Font size hệ thống…

---

6. Tích hợp vào workflow chuyên nghiệp

Một số framework hiện nay tích hợp sẵn reset hoặc normalize:

Framework	Dùng cái gì?
Tailwind	Preflight (dạng reset + normalize)
Bootstrap	Normalize CSS
Foundation	Normalize CSS

---

7. Gợi ý cấu trúc file

📋 Copystyles/
├── reset.css          # Reset đơn giản
├── normalize.css      # Nếu bạn dùng normalize
├── variables.css      # Biến CSS
├── base.css           # Font, color mặc định
├── layout.css         # Flex, grid, section...
├── components.css     # Nút, form, v.v.

---

Ghi nhớ

Nếu muốn…	Nên dùng
Xóa sạch mọi style mặc định	Reset
Giữ lại style hợp lý + đồng nhất	Normalize
Dự án phức tạp, tự thiết kế toàn bộ	Reset
Dự án nhanh, cần ổn định	Normalize