Share vì hữu ích

CSS Reset là một file thường được thấy trong các thư mục của rất nhiều project web frontend. Vậy bạn có biết nó được dùng vào mục đích gì không?

CSS Reset là gì?

CSS Reset là một loại các rules của CSS giúp thiết lập các style của tất cả đối tượng HTML (element) theo một chuẩn nhất định.

Nói thì có vẻ khó hiểu, nhưng thực chất là đây là “môn võ” bạn sẽ cần tới trong tất cả các dự án có liên quan tới frontend web và application. Lý do ư? Có thể bạn không biết, nhưng mỗi trình duyệt đều có những thiết lập giao diện riêng mặc định (mà khi bạn xem trong CSS, nó gọi là “user agent” ấy).

Chẳng hạn, hầu hết các trình duyệt đều để màu chữ của liên kết thẻ “<a>”
là màu xanh blue và các liên kết đã được ghé thăm (thuộc tính CSS là :visited) sẽ là màu tím (purple). Hay các bảng table sẽ có một khoảng border + padding cố định, hay việc các định dạng của Heading text như H2, H3 đã có sẵn font-size. Bạn cũng đừng quá ngạc nhiên nếu các nút Submit trong form website trên mỗi trình duyệt khác nhau!!!

Nếu bạn là một lập trình viên và phải xử lý việc giao diện hiển thị giống hệt nhau (hoặc khác nhau rất ít) trên các trình duyệt web, thì rõ ràng việc viết 1 đoạn code mà hoạt động trên tất cả trình duyệt tốt hơn là dùng các file style khác nhau cho mỗi trình duyệt đúng không?

Sử dụng CSS Reset, bạn như một ông chủ, yêu cầu những trình duyệt sử dụng chung các thuộc tính CSS do bạn quy định, sau đó bạn có thể chỉnh sửa theo ý thích của mình. Quá trình làm việc cross-browser lúc này dễ dàng hơn hẳn, đúng không?

So sánh giữa CSS Reset và không dùng CSS

Hãy lấy một ví dụ khi bạn không sử dụng bất kỳ file CSS nào (tức là lúc này style hoàn toàn là của trình duyệt) và khi bạn chỉ gắn file CSS chứa Reset CSS thôi nhé:

Tại sao cần Code Reset trong CSS
Giao diện khi chứa CSS Reset
Tại sao cần Code Reset trong CSS
Giao diện mặc định của trình duyệt

Ví dụ ở trên là rất rõ ràng cho việc CSS Reset giúp bạn làm những gì.

Sử dụng CSS Reset

Nếu bạn đã rõ ràng về mục tiêu của CSS Reset, ta hãy xem cách thức sử dụng nó ra sao. Những nguyên tắc được nêu ra dưới đây là rất quan trọng và nên áp dụng cùng nhau để mang lại kết quả tốt nhất. Cũng như ta nói, mua thuốc thì phải đọc kĩ hướng dẫn sử dụng trước khi dùng.

Nguyên tắc 1: CSS Reset luôn đặt đầu tiên trong các file CSS

Điều này thì rõ rồi. Bạn cần đặt các dòng CSS Reset ở trên cùng (nếu là cùng 1 file), còn nếu nó là 1 file riêng biệt, hãy import nó ở trên cùng đầu tiên.

Thêm nữa, nếu bạn muốn đặt nó trong thẻ <HEAD> của trình duyệt, đừng quên gọi nó đầu tiên.

Nguyên tắc 2: CSS Reset luôn xử lý các element HTML

Điều này được hiểu là CSS Reset sẽ tác động tới các element như <a>, <img> chứ không phải <a class=”link”> hay <img id=”image”>. Tức là, nhiệm vụ của CSS Reset là làm việc với các element trực tiêp chứ không phải các class hay ID nào cả. Lý do thì là bởi nó 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ự để áp đặt các style mặc định vào.

Nguyên tắc 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.

Thư viện có sẵn của CSS Reset

Cùng với ý tưởng là CSS Reset, có rất nhiều lập trình viên đã đưa ra các cách viết CSS Reset để chia sẻ với cộng đồng. Dưới đây là một số CSS Reset phổ biến:

Normalize.css

Đây là 1 file CSS tiêu chuẩn được sử dụng rất nhiều trong các thư viện Frontend Framework như Bootstrap, được @necolas và @jon_neal dành hơn 100 giờ nghiên cứu giúp mang lại thể hiện tương đối trên hầu hết các trình duyệt hiện nay.

Bạn có thể xem file này tại đây, ở trong file CSS có chứa comment để bạn hiểu nó làm gì luôn nhé.

CSS Reset của Eric Myer

Cái này cũng khá phổ biến và được dùng nhiều.

Xem code ở đây.

MarkSheet CSS Reset

Các đoạn code reset rất hữu ích nếu bạn sử dụng 100% web HTML5.

Xem code tại đây.

MiniReset.css

Một CSS Reset cũng khá hiệu quả.

Xem code

CSS Reset, có nên không?

Có một số người quan ngại việc CSS Reset ghi đè lên style của họ. Đây không phải câu hỏi thừa, nhưng rất dễ nhận ra bản chất của việc xung đột này: họ có thực hiện đúng các nguyên tắc mà chúng ta vừa nêu lên ở trên hay không? Nếu làm đúng, tôi tin rằng 99% chúng ta không gặp phải lỗi trên.

Thêm nữa, cách viết custom style không sử dụng element trực tiếp ngày càng phổ biến. Bạn nên cân nhắc điều này cho các dự án của mình.

Kết luận

Là một người sử dụng CSS Reset trong 100% các dự án của mình, tôi đánh giá tính hiệu quả cao của nó. Đã rất lâu rồi không ai hỏi tôi về việc 1 button hiển thị trên Safari như thế này nhưng tại sao trên IE11 nó lại như thế khác. Đó là cách ta giảm thời gian làm việc mà kết quả mang lại tốt hơn.

Tài liệu tham khảo thêm

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời