Bạn có nên tránh CSS quan trọng?

Khi nói đến các khai báo quan trọng, thứ tự tầng gốc và tầng được đảo ngược. Nếu không có cờ quan trọng, các khai báo trong biểu định kiểu của tác giả sẽ ghi đè các khai báo trong biểu định kiểu của người dùng, khai báo này sẽ ghi đè các khai báo trong biểu định kiểu mặc định của tác nhân người dùng

Khi một tuyên bố là quan trọng, thứ tự ưu tiên được đảo ngược. Các khai báo được đánh dấu là quan trọng trong biểu định kiểu tác nhân người dùng sẽ ghi đè tất cả các khai báo quan trọng trong biểu định kiểu tác nhân người dùng. Tương tự, tất cả các khai báo quan trọng trong biểu định kiểu của người dùng sẽ ghi đè lên tất cả các khai báo quan trọng trong biểu định kiểu của tác giả. Cuối cùng, tất cả các khai báo quan trọng được ưu tiên hơn tất cả các hoạt ảnh

Ghi chú. Tất cả các khai báo quan trọng được ưu tiên hơn tất cả các hoạt ảnh.

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Đảo ngược thứ tự ưu tiên cho các khai báo quan trọng đảm bảo người dùng có nhu cầu đặc biệt, chẳng hạn như phối màu được cá nhân hóa hoặc phông chữ lớn, có thể ghi đè kiểu tác giả khi cần bằng cách đánh dấu một số khai báo trong biểu định kiểu của người dùng là quan trọng. Nó cũng đảm bảo các tiện ích mở rộng độc hại không thể ghi đè các kiểu tác nhân người dùng quan trọng, có thể phá vỡ chức năng hoặc tác động tiêu cực đến bảo mật

Có bất cứ điều gì được ưu tiên hơn các tuyên bố quan trọng? . Chuyển đổi CSS là một cách để kiểm soát tốc độ thay đổi thuộc tính từ giá trị này sang giá trị khác. Trong khi chuyển đổi từ giá trị này sang giá trị khác, một thuộc tính sẽ không khớp với một khai báo quan trọng cụ thể

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Trong ví dụ này, thuộc tính

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Trong mỗi một trong ba nguồn gốc của biểu định kiểu - tác giả, người dùng và tác nhân người dùng - các khai báo thông thường trong các kiểu không có lớp sẽ ghi đè các khai báo kiểu có lớp, với lớp được khai báo cuối cùng có quyền ưu tiên hơn các lớp được khai báo trước nó. Các khai báo quan trọng đảo ngược thứ tự ưu tiên. các khai báo quan trọng ở lớp đầu tiên được ưu tiên hơn các khai báo quan trọng ở lớp tiếp theo, v.v. Ngoài ra, tất cả các khai báo quan trọng được ưu tiên hơn các khai báo quan trọng được thực hiện bên ngoài bất kỳ lớp nào

Kiểu nội tuyến là kiểu được xác định bằng thuộc tính

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Mặc dù

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

Ví dụ này hiển thị trường hợp chỉ định quá mức bộ chọn. Cho dù mức độ cụ thể của bộ chọn phù hợp với một khai báo thông thường cao đến mức nào, thì một khai báo quan trọng từ cùng một nguồn và tầng tầng sẽ luôn được ưu tiên. Trong trường hợp này, đoạn văn sẽ luôn có màu đỏ

Khi hai khai báo quan trọng từ cùng một nguồn gốc và lớp áp dụng cho cùng một phần tử, các trình duyệt sẽ chọn và sử dụng khai báo có tính đặc hiệu cao nhất

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

Trong trường hợp này, tính đặc hiệu của bộ chọn có vấn đề. Chỉ khi các bộ chọn có cùng độ đặc hiệu thì thứ tự nguồn mới quan trọng

Khai báo một thuộc tính tốc ký với

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

Ví dụ này cho thấy một trong nhiều lý do tránh cờ quan trọng thường được khuyến nghị

Khi cờ

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
  }
blockquote {
   color: var(--myColor);
   color: purple;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Trong ví dụ này, đoạn văn sẽ có màu đỏ, không phải màu xanh, vì việc gán giá trị thuộc tính tùy chỉnh rất quan trọng. Blockquote sẽ có màu tím, vì khai báo bình thường màu tím xuất hiện sau khai báo bình thường màu đỏ

Tránh sử dụng

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Ngay cả khi làm việc để ghi đè các kiểu có độ đặc hiệu cao không thuộc quyền kiểm soát của bạn, chẳng hạn như các kiểu trong plugin của bên thứ 3 được khai báo bằng bộ chọn id, bạn không cần sử dụng

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Nếu bạn cần ghi đè biểu định kiểu dáng bên ngoài có chứa các khai báo quan trọng, hãy tạo một tầng tầng chứa các giá trị thay thế cần thiết và khai báo lớp đó trước

Các kiểu quan trọng từ biểu định kiểu người dùng được ưu tiên hơn các khai báo quan trọng của biểu định kiểu tác giả, nghĩa là việc thêm cờ

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

Tại sao bạn không nên sử dụng CSS quan trọng?

Chúng ta có thể sử dụng cái gì thay vì quan trọng trong CSS?

Khi nào bạn nên sử dụng quan trọng?

Thứ tự CSS có quan trọng không?