Khi nào bạn nên sử dụng quy tắc CSS! Important?

Luật !important Important trong CSS cung cấp cho bạn khả năng overrides các kiểu, nhưng liệu sức mạnh này có quá sức đối với một nhà phát triển phần mềm đơn độc? Đọc bài viết này để tìm hiểu nó là gì và khi nào thì nên sử dụng nó!

Luật !important Important rất đặc biệt vì nó có khả năng overrides dòng kiểu CSS tự nhiên.

Hãy xem xét mã HTML / CSS sau đây… Bạn nghĩ văn bản sẽ có màu gì?

<div>
  <h1 id="title">Sir Chompsalot</h1>
</div>

div h1 {
  color: blue !important;
}

div h1 {
  color: green;
}

Thông thường, nếu ta có hai luật CSS có tính cụ thể giống hệt nhau, luật thứ hai sẽ thắng. Trong trường hợp này, luật CSS trước đó đánh bại bất kỳ luật nào sau này đơn giản vì nó có luật !important

Chữ màu xanh lam!

Sử dụng cùng một đánh dấu HTML, điều gì sẽ xảy ra nếu ta thậm chí còn cụ thể hơn bằng cách nhắm đến thẻ body và h1#title ?

div h1 {
  color: blue !important;
}

body div h1#title {
  color: green;
}

Điều này có khả năng overrides luật !important không?

Không! Chà, luật !important gần như quá mạnh so với lợi ích của chính nó.

💪🤖💪

Vì !important Important mâu thuẫn với hành vi mong đợi của CSS, bạn nên tránh sử dụng CSS. Nếu bạn dựa vào !important quá thường xuyên, nó có thể gây ra nhiều hành vi không mong muốn và các nhà phát triển mới sẽ gặp khó khăn khi gỡ lỗi CSS của họ. Tại sao dòng chữ này không đổi màu! 😂

Điều này nghĩa là bạn không bao giờ nên sử dụng nó?

Các dịp cần sử dụng! Quan trọng

Thời gian đã trôi qua kể từ khi CSS !important được giới thiệu, dường như có một số đồng thuận rằng nó thực sự chỉ hữu ích cho một công việc duy nhất: giao dịch với CSS nước ngoài .

CSS nước ngoài về cơ bản là bất kỳ CSS nào mà bạn không có khả năng trực tiếp thay đổi hoặc cải thiện bản thân. Hai trường hợp thực tế của CSS nước ngoài là:

Khung JavaScript & Thư viện Bên ngoài : Điều này áp dụng cho các thư viện phổ biến như Bootstrap hoặc Normalize . Vì bạn không thể chỉnh sửa trực tiếp các kiểu CSS của họ, nên đôi khi lựa chọn duy nhất của bạn là overrides CSS của họ bằng các luật !important của bạn !important
Phong cách user : Điều này đã từng rất phổ biến cách đây nhiều năm. Kiểu user cung cấp một cách để bạn tạo CSS của riêng mình để đưa vào các trang web do người / công ty khác sở hữu. Ví dụ: chủ đề tối này cho instagram.com

Vì bạn không thể thay đổi CSS nước ngoài (trừ khi bạn nhận việc tại Instagram để khắc phục sự thiếu hụt nghiêm trọng của chế độ tối), luật !important thực sự là lựa chọn duy nhất và tốt nhất của bạn.

Những người làm việc tại Mozilla Developer Network và CSS-Tricks dường như đồng ý rằng !important thực sự chỉ hữu ích khi giao dịch với CSS nước ngoài

Kết luận

Nếu bạn thực sự muốn sử dụng !important , hãy thử suy nghĩ về các quyết định kiến trúc mà bạn có thể đưa ra. Không chỉ CSS của bạn. Điều này nghĩa là thêm các thẻ HTML mới hoặc áp dụng các lớp / id mới. Tham gia vào thực hành lấy kiến trúc làm trung tâm này dẫn đến mã chất lượng cao, đó là một niềm vui để duy trì! 🤓

Bạn đã tìm thấy cách sử dụng thích hợp khác cho !important ? Tweet cho ta tại @alligatorio và chia sẻ nó với ta !

Tags:

Các tin liên quan

Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13