Thuộc tính !important trong CSS để làm gì?

Thuộc tính !important trong CSS được sử dụng để thêm trọng lượng (tầm quan trọng) hơn cho một thuộc tính/giá trị so với bình thường. Khi sử dụng !important, nó sẽ ghi đè lên TẤT CẢ các quy tắc định kiểu trước đó cho thuộc tính cụ thể đó trên phần tử.

Ví dụ, nếu có một quy tắc CSS đặt màu nền cho tất cả các đoạn văn bản là xanh, nhưng một quy tắc khác sử dụng !important để đặt màu nền là đỏ, thì màu nền đỏ sẽ được áp dụng bất chấp quy tắc xanh:

p {
  background-color: blue;
}

p {
  background-color: red !important;
}

Trong ví dụ trên, tất cả các đoạn văn bản sẽ có màu nền đỏ, ngay cả khi có các bộ chọn ID hoặc class có độ ưu tiên cao hơn.

Tuy nhiên, việc sử dụng !important nên được hạn chế vì nó có thể làm cho mã CSS trở nên rối rắm và khó debug, đặc biệt là khi có một style sheet lớn. Nó cũng có thể gây khó khăn trong việc bảo trì mã và làm giảm khả năng tái sử dụng mã CSS. Thay vào đó, nên cố gắng giải quyết các vấn đề về độ ưu tiên và đặc tính bằng cách sử dụng quy tắc độ ưu tiên và đặc tính CSS một cách tự nhiên.

Một số trường hợp sử dụng !important có thể chấp nhận được, chẳng hạn như khi bạn cần ghi đè một style không thể ghi đè theo cách khác, ví dụ như khi làm việc với một Hệ thống Quản lý Nội dung (CMS) mà bạn không thể chỉnh sửa mã CSS.