Une méthode inattendue pour augmenter la priorité d’un sélecteur CSS

 (cirrus.twiddles.com)
22 points par ragus 2024-10-04 | 7 commentaires | Partager sur WhatsApp

Problème

  • Lorsqu’on fait du styling en CSS, des conflits CSS surviennent parfois et des styles non souhaités peuvent alors s’appliquer.
  • Ces conflits proviennent généralement d’une bibliothèque d’interface, d’un widget tiers ou de code CSS géré par une autre équipe, et dans ce genre de situation, il est souvent impossible de modifier librement le CSS concerné.
  • En particulier, lorsqu’il y a conflit avec du CSS provenant d’une bibliothèque UI ou d’un tiers, il peut aussi être difficile d’ajouter des classes ou des ID supplémentaires au HTML.
  • De plus, si le code CSS à l’origine du conflit est écrit de manière très spécifique, il peut être impossible de rendre son propre CSS encore plus spécifique pour augmenter sa priorité.
  • À ce moment-là, beaucoup de développeurs se tournent facilement vers !important, mais ce n’est pas une méthode recommandée.

Solution

  • Il suffit de répéter le sélecteur.
  • Par exemple, .checkbox__icon.checkbox__icon a une priorité plus élevée qu’un simple .checkbox__icon.
  • Cette approche peut donner l’impression d’être une sorte de hack CSS, mais la spécification CSS Selectors Level 4 précise : "Repeated occurrences of the same simple selector are allowed and do increase specificity. (Les occurrences répétées d’un même sélecteur simple sont autorisées et augmentent bien la spécificité.)".

À lire aussi

7 commentaires

 
kroisse 2024-10-07

Maintenant que les CSS Cascade Layers (@layer) sont prises en charge par tous les principaux navigateurs, on n’aura plus besoin de dépendre de ce genre de hack.

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

Oh, donc c’est pour ça qu’on utilise && dans styled-components pour surcharger les styles ?
 
dogtree 2024-10-05

article d’étudiant descendu
 
kyc1682 2024-10-05

Une impression de magie noire, haha.
 
xenoside 2024-10-04

On va donc voir ce genre de code maintenant.
.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, je ne connaissais pas ça...
Selon le contexte, on pourrait aussi envisager d’utiliser un préprocesseur qui répète plusieurs fois le même sélecteur.
 
spilist2 2024-10-04

Oh, je ne connaissais pas cette méthode.