Bonnes pratiques CSS

Mobile‑first: écrire les styles de base pour les petits écrans, puis ajouter des media queries progressives. Pourquoi : cascade plus simple et meilleures performances.
Séparation des responsabilités : HTML = sémantique/structure ; CSS = présentation. Utiliser des classes pour le style, pas l’imbrication d’éléments.
Architecture modulaire : séparer en base, components, layout, pages ; garder des fichiers petits et ciblés.

BEM recommandé : block, block__element, block--modifier.
```
.btn { }
.btn--primary { }
.card__title { }
```
Éviter les sélecteurs descendants trop profonds et !important. Préférer des sélecteurs courts basés sur des classes pour de meilleures performances.

Variables CSS dans :root pour les couleurs, espacements et échelle typographique :
```
:root {
  --brand: #0a74da;
  --gap: 1rem; }
```
Unités : utiliser rem pour la typographie, clamp() / min() / max() pour des tailles fluides, % / fr pour des layouts flexibles.

Flexbox pour les layouts unidimensionnels ; Grid pour les layouts bidimensionnels. Utiliser gap plutôt que des astuces avec margin.
Utiliser prefers-reduced-motion et :focus-visible pour l’accessibilité.

Normalize ou reset au début du projet pour une cohérence entre navigateurs.
Critical CSS en inline pour le premier rendu (first paint) ; charger les styles non critiques de manière différée (lazy-load).
Outillage : PostCSS + Autoprefixer, minification, et stylelint + Prettier dans la CI.

Contraste : garantir des ratios de contraste conformes aux WCAG pour le texte.
Focus clavier : ne jamais supprimer les contours de focus ; styliser :focus-visible.
Réduction des animations : respecter prefers-reduced-motion.

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }

Générer une arborescence de fichiers de départ et des exemples de configuration stylelint / PostCSS adaptés à ton stack.
Créer un exemple de Critical CSS sur une page pour ton site.

Source