CSS moderne
Cascade, Flexbox, Grid, variables, responsive : le CSS d'aujourd'hui n'a plus rien du bricolage d'hier.
Cascade & spécificité
Quand deux règles se battent, gagne la plus spécifique (id > classe > élément), à égalité la dernière. !important est l'arme nucléaire : à bannir sauf utilitaire assumé.
◉ css
:root { --accent: #FF4D00; --gap: 1.2rem; }
.card {
display: grid;
gap: var(--gap);
padding: clamp(1rem, 3vw, 2rem);
}Flexbox ou Grid ?
- Flexbox : aligner dans une direction (barre de nav, ligne de boutons).
- Grid : des mises en page à deux dimensions (galeries, gabarits de page).
- Les deux se combinent : Grid pour la page, Flexbox dans les composants.
Sobre, responsive, accessible
clamp()et unités relatives pour des typos fluides sans media queries.prefers-reduced-motionetprefers-color-scheme: respecter l'utilisateur.- Contrastes vérifiés (4,5:1 minimum pour le texte), focus visibles au clavier.
✔ Pour aller plus loin : relisez la fiche HTML & CSS.