Définir une logique de couches
Séparer variables, styles de base, layout, composants et pages aide à savoir où placer une règle et réduit les doublons.
- Regroupez les tokens comme couleurs et espacements.
- Gardez les règles globales peu spécifiques.
- Placez les exceptions locales après les styles génériques.
Limiter la spécificité
Une cascade prévisible évite les !important et les sélecteurs trop longs. Des classes simples rendent les composants plus faciles à déplacer ou réutiliser.
- Préférez une classe de composant à une chaîne de sélecteurs.
- Évitez de cibler la structure DOM profonde.
- N’utilisez !important qu’avec une raison documentée.
Supprimer avant d’empiler
Quand un composant change, il est souvent préférable de corriger l’ancienne règle plutôt que d’ajouter une nouvelle surcharge à la fin du fichier.
- Recherchez les règles obsolètes avant d’en ajouter.
- Testez les composants dans leurs variantes principales.
- Documentez les conventions de nommage utiles au projet.
Checklist pratique
- Variables centralisées.
- Couches CSS identifiables.
- Spécificité faible et prévisible.
- Peu ou pas de !important.
- Anciennes règles nettoyées régulièrement.
Continuer avec les ressources liées
Conclusion
Le meilleur CSS n’est pas celui qui utilise le plus de techniques : c’est celui qu’un autre développeur peut comprendre et modifier sans casser le reste de l’interface.