Chapitre 13 : Bonnes pratiques CSS et organisation du code

Apprenez à écrire du CSS maintenable, organisé et performant grâce à ces bonnes pratiques essentielles.

1. Structurer son code CSS

Un bon code CSS est lisible, maintenable et réutilisable. Voici quelques conseils :

Regrouper les styles similaires ensemble
Commenter chaque section importante
Utiliser des noms de classes explicites

/* --- Mise en page générale --- */

body {

                          margin: 0;

                          padding: 0;

                          font-family: 'Segoe UI', sans-serif;

                        }

/* --- Navigation --- */

nav {

                          background-color: #333;

                          color: white;

                        }

2. Convention de nommage

Utilisez des noms de classes clairs et prévisibles, par exemple :

.bouton-principal
.carte-article

Recommandé : la convention BEM (Block Element Modifier)

.carte {}

.carte__titre {}

.carte__contenu {}

.carte--grande {}

3. Séparer les fichiers CSS

Pour de gros projets, il est conseillé de découper son CSS :

reset.css – réinitialisation
layout.css – structure globale
components.css – composants
theme.css – couleurs et styles graphiques

Ces fichiers peuvent être regroupés via @import ou des outils comme Sass ou PostCSS.

4. Optimiser le CSS

Éviter les sélecteurs trop complexes
Supprimer les règles inutilisées
Limiter l'utilisation de !important
Minimiser les répétitions (utiliser des variables)

5. Gérer les couleurs et les tailles avec des variables

Utiliser des variables CSS centralisées pour les couleurs, marges, polices...

:root {

                          --couleur-principale: #009688;

                          --taille-titre: 2rem;

                          --espacement-standard: 1.5rem;

                        }

6. Accessibilité

Respecter les contrastes (texte lisible sur fond)
Prévoir une alternative pour les animations : @media (prefers-reduced-motion)
Ne pas cacher des éléments importants avec display: none si accessibles via clavier

7. Utiliser un préprocesseur (optionnel)

Des outils comme Sass ou Less permettent :

L'utilisation de variables
Les fonctions et mixins
La structuration modulaire du CSS

8. Bonnes pratiques à retenir

Écrire un CSS clair et commenté
Organiser le code en blocs logiques
Nommer les classes de façon explicite
Utiliser les variables pour la cohérence
Garder un fichier CSS propre et optimisé

9. À éviter

Utiliser des classes génériques comme .box, .red
Réutiliser les mêmes styles copiés-collés
Abuser de !important
Utiliser des sélecteurs trop spécifiques ou en cascade profonde

10. Exercice final

Objectif : Structurer une feuille de style propre pour un composant de carte d'article.

HTML :

<div class="article-carte">

                          <h2 class="article-carte__titre">Titre de l'article</h2>

                          <p class="article-carte__contenu">Résumé du contenu...</p>

</div>

CSS :

:root {

                          --fond-carte: #f5f5f5;

                          --bordure-carte: #ccc;

                          --espacement: 1rem;

                        }

.article-carte {

                          background: var(--fond-carte);

                          border: 1px solid var(--bordure-carte);

                          padding: var(--espacement);

                        }

.article-carte__titre {

                          font-size: 1.5rem;

                          margin-bottom: 0.5rem;

                        }

.article-carte__contenu {

                          font-size: 1rem;

                          color: #555;

                        }

11. Conclusion

Tu maîtrises maintenant l'ensemble des bases de CSS3. En appliquant ces bonnes pratiques, tu écriras un code plus propre, performant et facile à maintenir.

N'hésite pas à expérimenter, tester et explorer les outils modernes (préprocesseurs, postprocesseurs, frameworks CSS).