Quy tắc !important được dùng để ghi đè (override) định dạng của trang web. Thực tế, lý do không nên dùng !important nhiều hơn lý do nên dùng. Hãy thảo luận cách dùng và tại sao chỉ nên dùng thận trọng.
Ghi đè user-agent stylesheet (CSS Framework)
Khi viết CSS, đôi khi bạn cần ghi đè stylesheet có sẵn. Nếu dùng CSS framework như Bootstrap, bạn có thể muốn tùy chỉnh style tích hợp sẵn.
Ví dụ: Bootstrap navbar có background mặc định. Bạn muốn đổi thành màu hồng. Thử thêm !important vào background-color: pink !important; trong selector .navbar. Navbar sẽ chuyển màu hồng.
Đây là trường hợp dùng đầu tiên: khi có user-agent stylesheet từ framework, bạn dùng !important để ghi đè style của framework.
Ghi đè inline styles
Trường hợp khác: cần ghi đè inline style của phần tử.
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li> <li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
Sử dụng !important trong CSS để ghi đè các inline style này. Ví dụ: .line-item:first-child { color: purple !important; }.
Lưu ý quan trọng: !important không phải best practice và nên dùng ít nhất. Nó có thể dẫn đến bug khó tìm sau này. Nếu bạn cảm thấy cần dùng !important mà không dùng framework, thường có thể tổ chức lại selector để đạt hiệu quả mong muốn.
Kết luận
!important là công cụ mạnh nhưng nguy hiểm. Chỉ dùng khi thực sự cần thiết (ghi đè framework, inline style) và không có cách khác. Luôn ưu tiên tổ chức CSS có cấu trúc, cụ thể (specificity) để tránh lạm dụng !important.