Composants réutilisables¶

📟 Qu'est-ce qu'un composant réutilisable?¶

Un composant réutilisable est un bloc de code HTML + CSS qui :

Peut être utilisé plusieurs fois dans un projet
A un style cohérent et prévisible
Est facile à maintenir (changer une fois = change partout)
S'adapte à différents contextes et contenus

Pensez-y comme des LEGO : Vous créez des pièces standardisées que vous pouvez assembler de différentes façons.

Exemples concrets de composants¶

📟 Pourquoi créer des composants réutilisables?¶

Avantages d'utiliser des composants réutilisables¶

Cohérence visuelle - Même look partout sur le site
Productivité - Codez une fois, utilisez partout
Maintenabilité - Un seul endroit à modifier
Scalabilité - Facile d'ajouter de nouvelles sections
Travail d'équipe - Tout le monde utilise les mêmes composants

SANS composants réutilisables¶

❌

/* Code dupliqué partout 😱 */
.carte-produit {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.carte-article {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.carte-utilisateur {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Problème : Si vous voulez changer le border-radius, vous devez modifier 3 endroits !

AVEC composants réutilisables¶

✅

/* Une seule définition 🎉 */
.carte {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Variations spécifiques si nécessaire */
.carte--produit { /* styles spécifiques */ }
.carte--article { /* styles spécifiques */ }

📟 Catégories de composants courantes et quelques exemples par type¶

Barre de navigation (navbar)
Menu déroulant (dropdown)
Barre latérale (sidebar)
Fil d'Ariane (breadcrumb)
Pagination
Menu de pied de page (footer)

2. Composants de contenu¶

Cartes (cards)
Listes de médias (media objects)
Sections hero
Article de blogue
Titre de section (si plus que juste un <h2>)
Grilles de galeries
Tableau de données
Bannière d'annonce (jumbotron)
Graphiques de statistiques (stat cards)
Carrousels (sliders)
Liste de logos (logo grid ou logo cloud)

3. Composants d'interface¶

Boutons
Case à cocher
Formulaires
Boîte de dialogue (modales)
Notifications/Alerts
Badges
Onglets
Accordéons
Barre de progression (progress bars)
Infobulles (tooltips)
Panier d'achat (cart)

4. Composants de mise en page¶

Conteneurs
Grilles de rangées et colonnes
Espacements (spacers)

📟 Principes de conception de composants¶

1. Un composant = Une responsabilité¶

❌ Mauvais :

.carte-produit-avec-bouton-et-image-et-prix {
  /* Trop spécifique, pas réutilisable */
}

✅ Bon :

.carte { /* Conteneur de base */ }
.carte__image { /* Image dans la carte */ }
.carte__titre { /* Titre dans la carte */ }
.carte__prix { /* Prix dans la carte */ }
.bouton { /* Bouton réutilisable partout */ }

2. Composants flexibles (pas rigides)¶

❌ Mauvais :

.carte {
  width: 300px;  /* Taille fixe = pas flexible */
  height: 400px;
}

✅ Bon :

.carte {
  width: 100%;  /* S'adapte à son conteneur */
  max-width: 400px;  /* Limite raisonnable */
}

3. Variantes avec modificateurs¶

Structure BEM (Block Element Modifier) :

/* Block - Composant de base */
.carte { }

/* Element - Partie du composant */
.carte__titre { }
.carte__image { }

/* Modifier - Variante du composant */
.carte--large { }
.carte--sombre { }

Exemple concret :

<!-- Carte normale -->
<div class="carte">
  <h3 class="carte__titre">Titre</h3>
</div>

<!-- Carte large -->
<div class="carte carte--large">
  <h3 class="carte__titre">Titre</h3>
</div>