CSS seçici önceliğini artırmanın şaşırtıcı bir yolu

Sorun

• CSS ile stillendirme yaparken zaman zaman CSS çakışmaları yaşanır ve istenmeyen stiller uygulanabilir.
• Bu tür çakışmalar genellikle UI kütüphaneleri, üçüncü taraf widget'lar ya da başka ekipler tarafından yönetilen CSS kodlarından kaynaklanır; böyle durumlarda CSS'i istediğiniz gibi değiştirmek çoğu zaman mümkün olmaz.
• Özellikle UI kütüphanelerinden veya üçüncü taraflardan gelen CSS ile çakışma olduğunda, HTML'ye ek class ya da ID eklemek de zor olabilir.
• Üstelik çakışmaya neden olan CSS kodu çok spesifik yazılmışsa, kendi CSS'inizin önceliğini artırmak için onu daha da spesifik hale getirmek de imkansız olabilir.
• Bu durumda birçok geliştirici kolayca !important kullanır, ancak bu önerilen bir yöntem değildir.

Çözüm

• Seçiciyi tekrarlayarak kullanabilirsiniz.
• Örneğin .checkbox__icon.checkbox__icon, tek bir .checkbox__icon seçicisinden daha yüksek önceliğe sahiptir.
• Bu yöntem bir CSS hilesi gibi görünebilir, ancak CSS Selectors Level 4 specification içinde "Repeated occurrences of the same simple selector are allowed and do increase specificity." ifadesi açıkça yer alır.

[kroisse]

Artık CSS Cascade Layers(@layer) tüm büyük tarayıcılarda desteklendiğine göre, bu tür hack'lere dayanmak gerekmeyecek gibi görünüyor.

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

[gwpark]

Aa, demek ki styled-components içinde && kullanarak stillerin üzerine yazmanın yolu buymuş?

[dogtree]

Öğrenci, yazıyı kaldırın

[kyc1682]

Biraz kara büyü gibi hissettiriyor lol

[xenoside]

Artık şöyle bir kod görmeye başlayacağız galiba.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon

[nemorize]

Vay, bunu bilmiyormuşum...
Duruma göre seçiciyi birkaç kez tekrar eden bir ön işleyici oluşturup kullanmak da düşünülebilir.

[spilist2]

Aa, bilmiyordum bu yöntemi.