CSS n’est pas une liste de propriétés. C’est un système de règles.

1. Anatomie d’une règle CSS

.card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: #f5f5f7;
}

Le sélecteur choisit les éléments ; le bloc contient des déclarations ; chaque déclaration associe une propriété à une valeur. Une feuille de style devient maintenable lorsque les sélecteurs restent simples et que les mêmes décisions visuelles sont réutilisées.

2. Cascade, héritage et spécificité

La cascade décide quelle valeur gagne lorsque plusieurs déclarations ciblent la même propriété. Elle tient compte notamment de l’origine des styles, de l’importance, des couches de cascade, de la spécificité et de l’ordre d’apparition.

La spécificité n’est donc pas la seule règle. MDN rappelle qu’elle intervient après la priorité des origines et couches.

/* plus simple à maintenir */
.button { ... }
.button--danger { ... }

/* souvent plus fragile */
main .toolbar div.actions button.primary { ... }

3. Le box model

Chaque élément est une boîte composée du contenu, du padding, de la bordure et de la marge. Avec box-sizing: border-box, la largeur déclarée inclut padding et bordure, ce qui simplifie beaucoup les calculs de layout.

*, *::before, *::after {
  box-sizing: border-box;
}

4. Les unités : choisir selon le problème

h1 {
  font-size: clamp(2.5rem, 7vw, 6rem);
}

5. Flexbox : aligner sur un axe

Flexbox est excellent pour les barres de navigation, groupes de boutons, listes horizontales et composants dont la distribution principale suit une ligne ou une colonne.

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

6. Grid : construire une grille en deux dimensions

Grid permet de définir lignes et colonnes ensemble. Une grille responsive peut souvent fonctionner sans media query grâce à minmax() et auto-fit.

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

7. Responsive : laisser le contenu guider les breakpoints

Un design responsive n’est pas une collection de tailles d’iPhone. MDN recommande des layouts flexibles puis des breakpoints lorsque le contenu commence réellement à mal se comporter.

• commencer par une mise en page simple qui fonctionne sur petit écran ;
• utiliser Flexbox/Grid avant d’ajouter des media queries ;
• limiter la largeur des textes longs ;
• éviter les dimensions fixes lorsque le contenu peut grandir ;
• tester zoom, orientation et textes longs.

@media (min-width: 60rem) {
  .layout { grid-template-columns: 2fr 1fr; }
}

8. Variables CSS et design tokens

Les propriétés personnalisées centralisent les décisions de design : couleurs, espacements, rayons, durées d’animation.

:root {
  --surface: #f5f5f7;
  --text: #1d1d1f;
  --space: 1rem;
  --radius: 1.5rem;
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
}

9. CSS et accessibilité

Le style ne doit pas casser les comportements utiles du navigateur. Préserve les focus visibles, évite les contrastes trop faibles et respecte la préférence de réduction des animations.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
  }
}