Logo

Reset CSS – Khởi Đầu Hoàn Hảo Cho Website Responsive

Kiến thức Frontend

Reset CSS – Khởi Đầu Hoàn Hảo Cho Website Responsive

Sử dụng Reset CSS để loại bỏ các thiết lập mặc định của trình duyệt, giúp giao diện website hiển thị đồng nhất, tối ưu trải nghiệm và chuẩn SEO.

Reset CSS là gì?

Reset CSS là tập hợp các quy tắc CSS được sử dụng để xóa bỏ hoặc đồng nhất các thiết lập mặc định của trình duyệt (như margin, padding, font-size...).
Nhờ đó, giao diện website của bạn sẽ trở nên thống nhất trên mọi trình duyệt và thiết bị.

Vì sao cần dùng Reset CSS?

Khi xây dựng website, mỗi trình duyệt sẽ tự động áp dụng các kiểu dáng mặc định cho thẻ HTML (ví dụ: margin cho <body>, padding cho <ul>, hay font-weight cho <h1>).
Điều này dẫn đến giao diện hiển thị không đồng nhất giữa Chrome, Firefox, Safari hay Edge.

Reset CSS giúp:

  • Loại bỏ sự khác biệt giữa các trình duyệt.

  • Đảm bảo tính thống nhất của giao diện.

  • Tối ưu trải nghiệm người dùng (UX).

  • Dễ dàng tùy biến CSS theo ý muốn.

Ví dụ Reset CSS chuẩn

Dưới đây là đoạn mã Reset CSS tối ưu mà bạn có thể sử dụng:

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
    border: none;
    background: none;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
    --font-body: "Gill Sans Extrabold", sans-serif;
    scroll-behavior: smooth;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
}

html, body {
    display: block;
    width: 100%;
    overflow-x: hidden;
}

body {
    line-height: 1.3;
    font-size: 1.6rem; /* 16px */
    font-family: var(--font-body);
}

Lợi ích khi áp dụng Reset CSS

  • Website nhẹ hơn: Không bị ảnh hưởng bởi CSS mặc định thừa.

  • Thiết kế chuẩn SEO: Dễ tối ưu tốc độ tải trang và trải nghiệm người dùng.

  • Responsive mượt mà: Giao diện đẹp trên mọi thiết bị.

  • Quản lý CSS dễ dàng: Toàn quyền kiểm soát giao diện.

Kết luận

Reset CSS là bước khởi đầu quan trọng khi xây dựng bất kỳ dự án web nào.
Việc áp dụng reset giúp đảm bảo giao diện đồng nhất, thân thiện với người dùng, đồng thời hỗ trợ quá trình SEO on-page hiệu quả.

Phản hồi (0)
0