Sélecteurs de base

Les trois sélecteurs essentiels :

p { color: #334155; }
.bouton { background: #0ea5e9; }
#menu-principal { background: #111827; }

• Balise : cible tous les élements du même type
• Classe : reutilisable
• ID : unique dans la page

En pratique, privilégier les classes pour le style.

Règle utile :

• utilise les balises pour les styles globaux simples
• utilise les classes pour les composants et variantes
• reserve les ID a des cas specifiques (ancre, JS, etc.)

A retenir

Les classes sont la base du styling maintenable. Elles sont reutilisables, lisibles et fonctionnent bien avec une approche composant. Les ID doivent rester exceptionnels pour eviter un CSS rigide.

Mini pratique

Crée une classe .carte appliquée à plusieurs blocs HTML. Ajoute ensuite une variante .carte--active pour voir la puissance des classes.

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.