Mobile First

Approche recommandée : coder d'abord pour petit écran, puis enrichir.

.card-list { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .card-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-list { grid-template-columns: repeat(3, 1fr); }
}

Pourquoi c'est efficace :

• le CSS de base reste simple
• les écrans larges recoivent des enrichissements progressifs
• tu évites de "casser" le mobile en fin de projet

A retenir

Avec mobile first, la version la plus contrainte est solide des le départ. Tu ajoutes ensuite du confort visuel à mesure que l'espace augmente.

Mini pratique

Prends une section de page existante, ecris d'abord un style mobile minimal, puis ajoute un palier tablette et un palier desktop.

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.