Retour à la leçon
Mission

Mission : une librairie tierce qui écrase les boutons maison

Résoudre un conflit d'intégration de librairie tierce avec les cascade layers et évaluer un choix BEM.

Contexte

Sur un projet de dix développeurs, .bouton (défini par l'équipe, padding: 8px 16px; border-radius: 8px;) est cassé dès qu'une librairie de composants tierce composants-tiers.css est importée après lui : elle définit aussi une règle .bouton avec des valeurs différentes, chargée plus tard dans le build, donc elle gagne systématiquement à spécificité égale. L'équipe ne veut ni renommer sa classe, ni ajouter !important partout.