Architecture CSS

Un bon CSS est lisible, reutilisable et stable.

Bonnes pratiques :

• nommage cohérent
• organisation par composants
• variables pour couleurs et espacements

:root {
  --color-primary: #0ea5e9;
  --space-md: 1rem;
}

Une architecture claire réduit les régressions et accélère le travail en équipe sur le long terme.

A retenir

La qualité CSS vient autant de l'organisation que des propriétés utilisées. Un code bien rangé est plus simple à maintenir, tester et faire évoluer.

Quand un projet grandit, une structure claire évite les doublons et les surcharges de specificité.

Mini pratique

Choisis une page de ton projet et sépare les styles en blocs logiques : base, composants, utilitaires.

Note ensuite les règles redondantes que tu peux factoriser avec des variables ou des classes reutilisables.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.