CSS!important đưa một khai báo lên nhóm ưu tiên riêng, đứng trên mọi specificity trong cùng origin.
css
.btn { color: blue !important; }
#page .btn.primary { color: red; } /* thua, dù specificity cao hơn nhiều */Vì sao nên tránh: cách duy nhất để ghi đè một !important là một !important khác có specificity cao hơn. Trong một dự án đang chạy, việc đó lan rất nhanh — mỗi lần sửa lại thêm một !important, đến lúc không ai biết giá trị nào đang thắng.
Hai chỗ dùng được:
1. Utility class phải thắng mọi thứ theo thiết kế (.hidden { display: none !important }).
2. Ghi đè CSS inline của thư viện ngoài khi không sửa được nguồn — inline style chỉ thua !important.
Giải pháp hiện đại thay cho nó là @layer:
css
@layer vendor, app;
@layer vendor { /* CSS thư viện */ }
@layer app { .btn { color: red; } } /* thắng, không cần !important */Chốt phỏng vấn: trả lời "tránh vì khó bảo trì" là đủ mức trung bình.
Nói thêm được @layer là cách xử lý gốc rễ mới tạo khác biệt.