Phase 5 — Outillage & production
#18 Architecture CSS
BEM, utility-first, CSS Modules
Pourquoi l'architecture CSS est importante
À mesure que les projets grandissent, du CSS non structuré devient impossible à maintenir. L'architecture CSS fournit des conventions pour garder les styles organisés et prévisibles.
La méthodologie BEM
BEM (Block, Element, Modifier) est une convention de nommage qui rend les classes CSS descriptives et structurées :
Nommage BEM
/* Block */
.card { }
/* Element (appartient au block) */
.card__title { }
.card__body { }
/* Modifier (variante) */
.card--featured { }
.card__title--large { }
/* HTML */
<div class="card card--featured">
<h3 class="card__title card__title--large">Titre</h3>
<p class="card__body">Contenu</p>
</div>CSS utility-first
Classes utilitaires
/* Classes utilitaires */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-4 { gap: 16px; }
.p-4 { padding: 16px; }
.rounded-lg { border-radius: 12px; }
/* Utilisation */
<button class="flex items-center gap-4 p-4 rounded-lg">
Cliquez
</button>CSS Modules
CSS Modules (React/Next.js)
/* Button.module.css */
.button {
background: #3b82f6;
color: white;
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css'
export function Button() {
return <button className={styles.button}>Cliquez</button>
}Organisation des fichiers
Structure recommandée
styles/
_variables.scss
_mixins.scss
_reset.scss
_base.scss
_typography.scss
_layout.scss
components/
_button.scss
_card.scss
_navbar.scss
pages/
_home.scss
_about.scss
main.scss # Point d'entréeÀ vous de jouer
Essayez les commandes ci-dessous :
terminal — npm