Vấn đề
- Khi styling bằng CSS, đôi lúc xảy ra xung đột CSS khiến một style không mong muốn bị áp dụng.
- Những xung đột này thường đến từ thư viện UI, widget bên thứ ba, hoặc mã CSS do nhóm khác quản lý, và trong những trường hợp như vậy ta thường không thể tự do chỉnh sửa CSS đó.
- Đặc biệt khi xung đột với CSS đến từ thư viện UI hoặc bên thứ ba, việc thêm class hay ID bổ sung vào HTML cũng có thể rất khó.
- Hơn nữa, nếu mã CSS gây xung đột được viết rất cụ thể, thì việc viết CSS của mình cụ thể hơn để tăng độ ưu tiên cũng có thể là điều bất khả thi.
- Lúc này nhiều lập trình viên dễ dàng dùng
!important, nhưng đây không phải là cách được khuyến nghị.
Giải pháp
- Chỉ cần lặp lại selector.
- Ví dụ,
.checkbox__icon.checkbox__icon có độ ưu tiên cao hơn một .checkbox__icon đơn lẻ.
- Cách này có thể trông như một mẹo hack CSS, nhưng theo đặc tả CSS Selectors Level 4, có ghi rõ: "Repeated occurrences of the same simple selector are allowed and do increase specificity.(Việc lặp lại cùng một simple selector là được phép và làm tăng specificity.)".
7 bình luận
Giờ đây CSS Cascade Layers (
@layer) đã được tất cả các trình duyệt chính hỗ trợ, nên có lẽ chúng ta không còn phải phụ thuộc vào những kiểu hack như thế này nữa.https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
À ra là trong styled-components, người ta ghi đè style bằng cách dùng
&&đúng không?Bài của học sinh, hạ xuống
Đúng là cảm giác như hắc ma pháp vậy haha
Bây giờ chắc chúng ta sẽ thấy những đoạn mã như thế này.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
Ồ, mình không biết điều này...
Tùy tình huống, có lẽ cũng có thể thử tạo và dùng một preprocessor lặp lại selector nhiều lần.
Ồ, đây là một cách mà tôi chưa biết.