Front End – Reset CSS Với Normalize.css

Bài đăng này đã không được cập nhật trong 5 năm

Mình thật sự chưa biết CSS Reset là gì cho đến khi mình gặp một vài vấn đề liên quan trong quá trình code giao diện.

Hôm bữa mình đang ngồi code mấy cái thẻ div ngon lành, chèn CSS khí thế đủ thứ kiểu, lúc sau inspect vào cái mấy div tự dưng lại thấy xuất hiện thêm một padding-top khác từ đầu ra.

Sau quá trình tìm hiểu, mình mới nhận ra nguyên do là mỗi phần tử HTML đều có những quy tắc hiển thị khác nhau tuỳ theo mỗi trình duyệt. Và đó là lí do mình viết bài post này. Hãy share và bình luận nếu các anh em cảm thấy nó hữu ích. Ahihi

Đây là link bài viết của tui:

https://hungphamdevweb.com/front-end-reset-css-voi-normalize-css.html

CSS Reset là gì ?

Chúng ta hãy dành một tí phút để tìm hiểu, trước khi sử dụng nó nhé :joy_cat:. Cũng giống như cái title CSS Reset, hiển nhiên nó là một số thuộc tính CSS dùng để "cài đặt" lại tất cả các CSS của trình duyệt về mặc định.

Việc này là tối quan trọng nếu các anh em không muốn viết nhiều phiên bản CSS trên project của mình riêng cho mỗi trình duyệt.

Thực chất nếu các anh em chỉ thường sử dụng các CSS Framework như Bootstrap, thì cũng chả cần quan tâm vấn đề này vì hầu như chúng luôn được include trong tất cả Front End Framework như trên.

Chúng ta chỉ thực sự để tâm đến CSS Reset khi các anh em muốn tạo riêng cho mình một Mini CSS Framework để xây dựng giao diện với một số công nghệ giới hạn CSS như Google AMP

Thư Viện CSS Reset Normalize.css

Các anh em có thể tìm hiểu và download Normalize ở đây nhé Normalize.css.

Có rất nhiều thư viện về CSS Reset nhưng ở đây mình sẽ chỉ giới thiệu về Normalize thôi, bởi vì độ phổ biến và sự tin dùng của nó.

Cơ bản Normalize là một chuỗi các thuộc tính chuyên dùng chỉ để Reset CSS.

Dưới đây là một đoạn code nhỏ trong Normalize

/**

 * 1. Correct the line height in all browsers.
 
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

Ở đây người ta cũng đã chú thích rất kỹ, các anh em chỉ cần đọc sơ qua thôi cũng sẽ hiểu.

Nguyên Tắc Sử Dụng CSS Reset

Dưới đây là một vài nguyên tắc hoạt động CSS Reset, các anh em nên biết sơ qua trước khi bắt đầu code giao diện:

Rule 1: CSS Reset luôn ở đầu tiên trong các file CSS

Điều này thì các anh em đã rõ như ban ngày rồi. Nếu nó là một file riêng hãy import nó ở trên cùng, còn nếu copy thì cũng nên nhớ paste nó ở trên cùng file CSS của mình.

Rule 2: CSS Reset luôn xử lý các element HTML

Nhiệm vụ của CSS Reset là làm việc trực tiếp với các element chứ không phải các class hay ID nào cả. Bởi nó sẽ làm việc với trình duyệt, mà các trình duyệt cũng làm cách tương tự để thêm các CSS mặc định vào.

Rule 3: Custom CSS Style phải gọi vào các Class/ID hoặc có parent element

Điều này rất rõ ràng và cần thiết trong Code Standards: Bạn nên code vào .button thay vì a.button Bạn nên code vào .list li thay vì ul li hay ul.list li Việc tránh gọi các element trình duyệt mà sử dụng Class/ID đóng vai trò quan trọng giúp bạn dễ dàng xử lý xung đột giữa CSS Reset và Custom Style.

Kết Luận

Mặc dù CSS Reset đã là một kiến thức lỗi thời rồi nhưng mình nghĩ cũng còn đại đa số các anh em Developer như mình vẫn chưa có biết. Nếu muốn sớm trở thành một Senior Front-end, mình nghĩ đây là một kiến thức căn bản mà bất kì Coder nào cũng cần phải có.

Mọi thắc mắc vui lòng để lại bình luận nhé, thân ái và quyết thắng