CONTENU :
Tout développeur CSS a un jour été confronté à la frustration de voir ses styles ne pas s'appliquer comme prévu. C'est le casse-tête de la spécificité CSS. Quand on ajoute des styles, il arrive que certains soient ignorés par le navigateur au profit d'autres plus spécifiques. Recourir à l'utilisation de !important est toujours risqué et déconseillé. Mieux vaut donc comprendre en profondeur les mécanismes de la spécificité.
Plusieurs approches ont été développées pour tenter de maîtriser cette problématique :
La méthodologie BEM (Block, Element, Modifier) rend la hiérarchie des styles explicite, maintenant ainsi une spécificité faible. Chaque composant vit de manière isolée, évitant les conflits.
Les classes utilitaires, quant à elles, contournent le problème en donnant la même spécificité à chaque classe. Chacune ne fait qu'une seule chose, on les empile pour obtenir le style souhaité.
Enfin, les couches CSS (Cascade Layers) permettent d'organiser les styles en groupes hiérarchiques, facilitant leur gestion.
Chacune de ces approches a ses forces et ses faiblesses. L'important est de choisir celle qui convient le mieux à son projet et de toujours garder à l'esprit le principe de base : maintenir la spécificité au plus bas possible. Ainsi, on évite les guerres de sélecteurs et on facilite la maintenabilité du code CSS.