Chapitre 13 : Organisation et bonnes pratiques CSS

1. Pourquoi organiser son CSS ?

Un bon développeur CSS ne se contente pas de faire fonctionner le style : il l’écrit proprement, le structure, et le rend facile à maintenir. Cela permet de :

• 📚 mieux comprendre le code après plusieurs jours
• 🤝 collaborer plus facilement avec d’autres développeurs
• ⚡ éviter les conflits de style ou les duplications

2. Utiliser un fichier externe .css

Toujours séparer HTML et CSS. Exemple dans le HTML :

<link rel="stylesheet" href="style.css">

Tu peux aussi diviser ton CSS en plusieurs fichiers si besoin : base.css, layout.css, modules.css, etc.

3. Éviter les sélecteurs trop généraux

Évite d’écrire :

* {
  margin: 0;
  padding: 0;
}

Car cela supprime les marges/paddings partout. Préfère l’utilisation de reset.css ou normalize.css pour un comportement cohérent.

4. Utiliser des classes explicites

Utilise des noms de classes clairs, en anglais si possible. Exemples :

.card-title, .main-header, .btn-primary

Évite les noms vagues comme .rouge, .gros, .truc.

5. Conserver un ordre logique

Voici un ordre conseillé pour chaque bloc CSS :

• positionnement
• box model (margin, padding, width…)
• typographie
• couleurs
• comportement interactif (hover, etc.)

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: blue;
  transition: background 0.3s;
}

6. Convention de nommage (BEM)

La méthode BEM (Block Element Modifier) améliore la clarté :

.card {}
.card__title {}
.card--highlighted {}

Cela permet d’organiser les composants visuellement et logiquement.