CSS!important không sửa nguyên nhân, nó nhảy khỏi luật cascade. Hệ quả:
- Muốn đè lại một khai báo
!importantchỉ còn cách thêm!importantkhác cụ thể hơn — file CSS trượt dần vào cuộc đua leo thang. - Style inline từ JS (animation library,
element.style) không còn đè được nữa nếu không cũng!important. - Người sau đọc code không biết rule đó thắng vì lý do gì, mọi override đều thành thử-và-sai.
Xử lý theo thứ tự ưu tiên:
1. Kiểm tra DevTools xem rule của lib có specificity bao nhiêu, rồi viết selector cùng mức và đặt sau trong thứ tự import (CSS của app import sau CSS của lib).
2. Dùng đúng điểm mở rộng lib cung cấp: prop className, CSS variable theme, hoặc class gốc của component.
3. Với dự án mới, đặt CSS của lib vào một cascade layer thấp hơn (@layer vendor, app;) — mọi rule trong app thắng bất kể specificity.
css
@layer vendor, app;
@layer vendor { @import 'antd/dist/reset.css'; }
@layer app { .btn { padding: 12px; } }!important chỉ hợp lý ở vài chỗ hẹp: utility class một-mục-đích (Tailwind cho phép prefix !), hoặc khi buộc phải đè style inline do bên thứ ba chèn vào mà không có cách nào khác.