Cara tak terduga untuk meningkatkan prioritas selector CSS

 (cirrus.twiddles.com)
22 poin oleh ragus 2024-10-04 | 7 komentar | Bagikan ke WhatsApp

Masalah

  • Saat melakukan styling dengan CSS, terkadang terjadi konflik CSS sehingga style yang tidak diinginkan diterapkan.
  • Konflik seperti ini biasanya disebabkan oleh library UI, widget pihak ketiga, atau kode CSS yang dikelola tim lain; dalam situasi seperti ini sering kali kita tidak bisa bebas mengubah CSS tersebut.
  • Terutama jika konflik terjadi dengan CSS dari library UI atau pihak ketiga, menambahkan class atau ID tambahan ke HTML juga bisa jadi sulit.
  • Selain itu, jika kode CSS yang menjadi penyebab konflik ditulis dengan sangat spesifik, menulis CSS kita dengan selector yang lebih spesifik untuk menaikkan prioritas juga bisa jadi tidak memungkinkan.
  • Pada situasi ini banyak developer dengan mudah menggunakan !important, tetapi ini bukan pendekatan yang direkomendasikan.

Solusi

  • Gunakan selector yang sama secara berulang.
  • Misalnya, .checkbox__icon.checkbox__icon memiliki prioritas lebih tinggi daripada satu .checkbox__icon.
  • Cara ini mungkin terasa seperti hack CSS, tetapi dalam spesifikasi CSS Selectors Level 4 tertulis bahwa "Repeated occurrences of the same simple selector are allowed and do increase specificity.(Kemunculan berulang dari simple selector yang sama diperbolehkan dan memang meningkatkan specificity.)".

Bacaan terkait

7 komentar

 
kroisse 2024-10-07

Sekarang CSS Cascade Layers(@layer) sudah didukung di semua browser utama, jadi kita tidak perlu lagi bergantung pada hack semacam ini.

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
 
gwpark 2024-10-06

Oh, jadi itu sebabnya di styled-components kita memakai && untuk menimpa style, ya?
 
dogtree 2024-10-05

Tulisan siswa diturunkan
 
kyc1682 2024-10-05

Terasa seperti ilmu hitam ya wkwk
 
xenoside 2024-10-04

Sekarang kita akan melihat kode seperti ini.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
 
nemorize 2024-10-04

Oh, saya belum tahu soal ini...
Tergantung situasinya, sepertinya kita juga bisa mencoba membuat dan menggunakan preprocessor yang mengulang selector beberapa kali.
 
spilist2 2024-10-04

Oh, ternyata ada cara seperti ini ya.