CSS important là gì? sử dụng thế nào cho hợp lí

CSS important là gì?

Quy tắc !important trong CSS được sử dụng để thể hiện mức độ quan trọng của property/value hơn mức bình thường.

Có nghĩa là nếu chúng ta sử dụng !important, nó sẽ ghi đè tất cả các quy tắc tạo kiểu trước đó của thuộc tính cụ thể trên phần tử.

Cho một số bạn mới tìm hiểu về thuộc tính này thì rule này hoạt động như sau:

<p id="green">Hello</p>

p {
  color: yellow !important;
}
#green {
  color: green;
}

Bạn đoán thử ở ví dụ trên, văn bản sẽ có màu gì? Câu trả lời là đoạn văn sẽ có màu vàng, mặc dù #green được viết sau. Điều đặc biệt ở đây là khi sử dụng !important, rule này sẽ ghi đè thuộc tính color.

!important nếu bị lạm dụng nhiều sẽ làm cho CSS lộn xộn và khó maintain.

Sử dụng css important hiệu quả

Để sử dụng !important hiệu quả chúng ta sẽ dùng chúng đối với các utility classes.

Giả sử mình tạo một class để reuse là .button.

<button class="button">Click me!</button>

.button {
   background: blue; 
   color: white;
   padding: 5px 10px;
   border-radius: 5px;
}

Sau khi sử dụng class button thì chúng ta được element có style theo như ý muốn. Nhưng giả sử button ở trên nằm trong parent và trước đó bạn đã style cho button như này:

<div id="content">
   <p>text... <button class="button">View more</button></p>
</div>

#content button {
  background: red;
}

Lúc này button của chúng ta sẽ có màu đỏ thay vì màu xanh như trong class .button. Lý do xảy ra trường hợp không mong muốn như trên là bởi vì css áp dụng style cho selector có specificity (dịch là độ đặc hiệu) cao hơn.

Để xử lý trường hợp này chúng ta sẽ thêm !important cho các thuộc tính trong class .button.

Khi sử dụng !important ta sẽ được specificity cao hơn #content button.

.button {
   background: blue!important; 
   color: white!important;
   padding: 5px 10px!important;
   border-radius: 5px!important;

   text-decoration: none!important; // thêm vào cho 
  trường hợp bạn sử dụng class này cho thẻ a
}

Cách duy nhất để ghi đè !important là sử dụng thêm !important khác và nó sẽ phải khai báo sau cái bạn muốn ghi đè trong CSS.

Kết luận

Trên đây là một vài kinh nghiệm của mình khi sử dụng !important. Hi vọng vài viết sẽ hữu ích cho các bạn.

Chúng ta sẽ gặp lại nhau trong các bạn viết sắp tới. Chúc các bạn học tốt. Peace out! 😁

Một số bài viết bạn nên đọc:

1. Tất tần tật về border-radius trong CSS
2. Khác nhau giữa Background vs Background-Color trong CSS
3. Một số CSS Shorthand hay giúp ích cho lập trình viên
4. Cắt ngắn chuỗi chỉ với CSS - Truncate text with CSS
5. CSS Variables là gì? cách sử dụng hiệu quả CSS Variables