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à downloadNormalize
ở đâ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 emDeveloper
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
All rights reserved