Important được sử dụng để thay đổi thứ tự ưu tiên của code CSS, thuộc tính css được gán important thì nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó được định nghĩa inline hay trong file css.

Để dể hiểu hơn, chúng ta cùng xét qua ví dụ sau nha.

Ví dụ 1:
Ta có 2 code css như sau cho thẻ h1
<h1 style="color: green">Ut nisi mollit.</h1>

và
<h1>Ut nisi mollit.</h1>

với thuộc tính css sau

h1 {
    color: red;
}

Chúng ta dễ dàng thấy kết quả là thẻ h1 có text màu green đúng không nào. Vì thuộc tính css được khai báo inline, nên nó sẽ ưu tiên cao nhất.

Ta đến với ví dụ 2:
Cũng thẻ h1 ở ví dụ 1, bây giờ ta chỉnh lại code css 1 tý như sau:

h1 {
    color: red !important;
}

Kết quả bây giờ thẻ h1 sẽ có màu đỏ, thuộc tính !important sẽ ưu tiên cao nhất trong trang web.

Important cũng có tác dụng định nghĩa độ ưu tiên trong cùng file css chứ không cần quan tâm các định nghĩa được viết sau.

h1 {
    color: red !important;
}

h1 {
    color: green;
}

Hi vọng qua đây các bạn có cái nhìn hơn về important trong css, để có thể viết code tốt hơn cũng như kiếm soát được các mức độ ưu tiên cao thấp trong dự án.

Có như vậy mới dễ fix bug (haha) . Theo mình các bạn nên viết tất cả code css vào 1 file css hoặc phân chia theo từng module để dễ quản lý.