Sau khi hoàn thành phần HTML5 Enterprise, chúng ta đã có thể xây dựng cấu trúc website chuẩn. Tuy nhiên, nếu mở cùng một trang trên Chrome, Firefox, Edge hoặc Safari, bạn sẽ thấy giao diện có thể không giống nhau.
Nguyên nhân là mỗi trình duyệt đều có một bộ CSS mặc định (User Agent Stylesheet) riêng.
Để giải quyết vấn đề này, lập trình viên thường bắt đầu dự án bằng CSS Reset.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ:
Hiểu CSS Reset là gì.
Biết vì sao cần Reset CSS.
Phân biệt CSS Reset và Normalize CSS.
Tự xây dựng một bộ Reset hiện đại.
Chuẩn bị nền tảng cho Responsive Design và Design System.
CSS Reset là gì?
CSS Reset là tập hợp các quy tắc CSS giúp đưa tất cả các trình duyệt về một điểm xuất phát giống nhau.
Ví dụ:
Chrome có thể đặt:
body {
margin: 8px;
}
Trong khi trình duyệt khác có thể xử lý khoảng cách hoặc kích thước mặc định khác nhau.
Điều này khiến cùng một mã HTML hiển thị không đồng nhất.
Vì sao cần CSS Reset?
Nếu không Reset CSS:
Margin khác nhau.
Padding khác nhau.
Font mặc định khác nhau.
Danh sách (
ul,ol) hiển thị khác nhau.Heading có kích thước khác nhau.
Form hiển thị không đồng nhất.
Điều này làm quá trình thiết kế giao diện trở nên khó kiểm soát.
Ví dụ
Không Reset:
<h1>Enterprise Web</h1>
<p>Hello World</p>
Bạn sẽ thấy khoảng cách giữa các phần tử phụ thuộc vào trình duyệt.
Sau khi Reset, khoảng cách sẽ do chính bạn quyết định.
CSS Reset cổ điển
Trước đây nhiều lập trình viên sử dụng:
*{
margin:0;
padding:0;
}
Đây là cách đơn giản nhất.
Tuy nhiên, nó chưa đủ cho các dự án hiện đại.
Universal Selector
*{
margin:0;
padding:0;
}
Dấu * nghĩa là:
Áp dụng cho tất cả phần tử HTML.
Ví dụ:
div
h1
p
ul
img
button
đều bị Reset.
Box-sizing
Đây là dòng gần như luôn có trong mọi dự án.
*{
box-sizing:border-box;
}
Không có border-box
width = content
+
padding
+
border
Tổng chiều rộng sẽ lớn hơn giá trị bạn khai báo.
Có border-box
width
=
content
+
padding
+
border
Chiều rộng luôn đúng bằng giá trị khai báo.
Đây là cách tính được sử dụng phổ biến trong các dự án hiện đại.
Reset cho body
body{
margin:0;
}
Loại bỏ khoảng trắng mặc định của trình duyệt.
Reset hình ảnh
img{
display:block;
max-width:100%;
}
Ý nghĩa:
display:block
→ loại bỏ khoảng trắng dưới ảnh.
max-width:100%
→ ảnh không vượt quá phần tử cha.
Đây là nền tảng cho Responsive Images.
Reset danh sách
ul,
ol{
list-style:none;
}
Loại bỏ:
dấu chấm
số thứ tự
Bạn có thể tự thiết kế giao diện danh sách sau này.
Reset liên kết
a{
text-decoration:none;
color:inherit;
}
Giúp:
bỏ gạch chân
kế thừa màu chữ từ phần tử cha
Sau đó bạn có thể tùy chỉnh màu sắc theo Design System.
Reset Button
button{
border:none;
background:none;
cursor:pointer;
}
Giúp nút có giao diện thống nhất hơn giữa các trình duyệt.
Reset Form
input,
textarea,
select,
button{
font:inherit;
}
Giúp các thành phần Form sử dụng cùng font với website.
Reset Table
table{
border-collapse:collapse;
}
Loại bỏ khoảng cách giữa các ô trong bảng.
CSS Reset hiện đại
Đây là bộ Reset đơn giản nhưng phù hợp với hầu hết dự án.
*,
*::before,
*::after{
box-sizing:border-box;
}
*{
margin:0;
padding:0;
}
body{
line-height:1.5;
}
img{
display:block;
max-width:100%;
}
ul,
ol{
list-style:none;
}
a{
color:inherit;
text-decoration:none;
}
input,
button,
textarea,
select{
font:inherit;
}
table{
border-collapse:collapse;
}
Đây là một điểm khởi đầu tốt cho các dự án doanh nghiệp.
CSS Reset và Normalize khác nhau thế nào?
CSS Reset
Mục tiêu:
Xóa gần như toàn bộ CSS mặc định của trình duyệt.
Ưu điểm:
Đồng nhất.
Dễ kiểm soát.
Phù hợp Design System.
Nhược điểm:
Phải tự định nghĩa lại nhiều kiểu hiển thị.
Normalize CSS
Mục tiêu:
Giữ lại những thiết lập mặc định hữu ích và chỉ sửa những điểm khác biệt giữa các trình duyệt.
Ưu điểm:
Ít phải viết lại CSS.
Phù hợp nhiều website nội dung.
Nhược điểm:
Một số kiểu mặc định vẫn còn tồn tại.
Khi nào dùng Reset?
Nên dùng khi xây dựng:
Landing Page
Website doanh nghiệp
Dashboard
CRM
ERP
SaaS
E-Commerce
Design System
Component Library
Đây cũng là lựa chọn phổ biến trong các dự án Front-End hiện đại.
Những lỗi thường gặp
❌ Chỉ Reset bằng:
*{
margin:0;
padding:0;
}
mà quên box-sizing.
❌ Không Reset ảnh khiến hình vượt khỏi khung.
❌ Quên font: inherit cho Form.
❌ Reset quá mạnh rồi không định nghĩa lại kiểu hiển thị cần thiết.
❌ Xóa toàn bộ Focus của trình duyệt mà không thay thế bằng kiểu Focus mới, làm giảm khả năng Accessibility.
Thực hành
Tạo tệp:
reset.css
Bao gồm:
Reset Margin
Reset Padding
Border Box
Reset Image
Reset List
Reset Link
Reset Button
Reset Form
Reset Table
Sau đó nhúng vào một trang HTML và kiểm tra sự khác biệt trước và sau khi áp dụng.
Tổng kết
CSS Reset là bước đầu tiên trong hầu hết các dự án Front-End chuyên nghiệp. Nó giúp loại bỏ sự khác biệt giữa các trình duyệt, tạo nền tảng ổn định để xây dựng giao diện hiện đại và dễ bảo trì.
Trong bài tiếp theo, chúng ta sẽ tìm hiểu CSS Variables, một tính năng mạnh mẽ giúp quản lý màu sắc, khoảng cách và toàn bộ Design System một cách linh hoạt.
📌 Kiến thức đạt được
✅ Hiểu CSS Reset là gì.
✅ Biết nguyên nhân khiến giao diện khác nhau giữa các trình duyệt.
✅ Sử dụng
box-sizing: border-box.✅ Reset hình ảnh, danh sách, liên kết, Form và bảng.
✅ Phân biệt CSS Reset và Normalize CSS.
✅ Xây dựng bộ CSS Reset hiện đại cho dự án Enterprise.
➡️ Bài tiếp theo: Bài 06 — CSS Variables: Xây dựng Design System linh hoạt với Custom Properties.
Không có nhận xét nào:
Đăng nhận xét