|<- [[!important]]|[[Architectural Principles]] ->|

====== Hacking Specificity ======

Avec tout ce que nous avons dit sur la spécificité et la nécessité de la garder aussi basse que possible, il est inévitable que nous rencontrions des problèmes. Quels que soient les efforts que nous y mettions, aussi consciencieux que nous soyons, il y aura toujours des cas où nous devrons nous battre avec et hacker les spécificités.

Lorsque ces situations arrivent, il est important que nous produisions les hacks de manière aussi sécurisé et élégante que possible.

Si vous deviez augmenter la spécificité d'un sélecteur de classe, il existe différentes options. Nous pourrions nicher la classe à l'intérieur quelque chose d'autre pour augmenter la spécificité. Par exemple, nous pourrions utiliser .header .site-nav {} pour augmenter la spécificité d'un simple sélecteur .site-nav {}.

Le problème avec cela, et que comme on l'a déjà discuté, cela introduit une dépendance de localisation : ces styles fonctionneront seulement lorsque le composant .site-nav se situera dans le composant .header.

Au lieu de cela, l'on peut utiliser un hack bien plus sécurisé qui n'impactera pas la portabilité de ce composant : on peut chaîner ce composant avec lui-même :

<code>
.site-nav.site-nav { }
</code>

Ce chaînage double la spécificité du sélecteur, mais n'introduit pas de dépendance de localisation.

In the event that we do, for whatever reason, avoir un Id dans notre markup qui ne peut être remplacé par une classe, le sélectionner par un séélecteur d'attribut plutôt que par un sélecteur d'Id. Par exemple imaginons que nous avons intégré une page externe sur notre page. Nous pouvons styler le widget via le balisage que celui-ci sort, mais en ayant aucune capacité d'édition dudit balisage :

<code>
<div id="third-party-widget">
  ...
</div>
</code>

Même si nous savons qu'il ne faut pas utiliser les Id en CSS, quelles options avons-nous ? Nous voulons styler ce HTML, mais tout ce que l'on a est un Id.

Nous opérons ainsi :

<code>
[id="third-party-widget"] { }
</code>

Ici nous sélectionnons sur la base d'un attribut plutôt que par l'id, et les sélecteurs d'attributs ont la même spécificité que les classes. Ceci nous permet de styler sur la base de l'ID, mais sans introduire une spécificité accrue.

Gardez à l'esprit que ces choses sont des hacks, et ne devraient être utilisées qu'en dernier recours s'il n'existe pas de meilleure alternative.

===== Further Reading =====


  - [[http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/|Hacks for dealing with specificity]]