reset

Une base de travail moderne pour uniformiser les styles des éléments HTML entre navigateurs

reset.css et print.css appliquent de bonnes pratiques d'accessibilité et optimisent l'expérience utilisateur, prêts à être placés dans un layer config.

Télécharger reset.css Voir sur GitHub

Principales sections couvertes

  1. Configuration globale

    Color-scheme et modèle de boîte

  2. Éléments de base

    Styles fondamentaux HTML et body

  3. Navigation et focus

    Gestion accessible du clavier

  4. Typographie

    Titres, paragraphes, guillemets français

  5. Listes

    Reset accessible, role="list"

  6. Éléments média

    Prévention des débordements

  7. Formulaires

    Normalisation champs et boutons

  8. Préformatés

    Configuration optimale du code

  9. SVG

    Gestion moderne des vectoriels

  10. ARIA

    Support attributs et états ARIA

  11. Masquage accessible

    Classe .visually-hidden

  12. Reset print

    Styles optimisés impression

Méthodologie — ordre des layers

survoler une couche

  1. 01 config

    reset.css, theme.css, theme-tokens.css, layouts.css

  2. 02 base

    styles.css — gabarits, typographie

  3. 03 components

    tous les fichiers CSS des composants

  4. 04 utilities

    print.css, classes utilitaires

Les layers sont déclarés du moins prioritaire au plus prioritaire : un style placé dans un layer ultérieur l'emporte sur les précédents, quelle que soit la spécificité de ses sélecteurs.

Exemple de structure complète

Placez ce reset dans un layer CSS config sous vos autres layers pour une meilleure organisation du code et gestion de la spécificité CSS. 

@layer config, base, components, utilities;

@import "reset.css" layer(config);
@import "theme.css" layer(config); /* vos styles — thème du projet (couleurs, espacements…) */
@import "styles.css" layer(base); /* vos styles globaux du projet */
@import "print.css" layer(utilities);

Ce fichier Reset entre dans un workflow global qui se résume à un fichier app.css qui charge toutes les feuilles de styles dans l'ordre des layers CSS :

  1. Layer config (reset, polices, themes, layouts) :
    • reset.css - Reset CSS moderne (et reset print)
    • theme.css - Thème principal (valeurs primitives)
    • theme-tokens.css - Variables sous forme de tokens
    • layouts.css - Utilitaires de disposition des composants
  2. Layer base :
    • styles.css - Styles globaux du projet (gabarits, typographie, etc.)
  3. Layer components :
    • tous les fichiers CSS des composants (bouton, input, etc.)
  4. Layer utilities :
    • print.css - Reset print
    • Autres fichiers de classes utilitaires si nécessaire (accessibilité, alignement, etc.)

Pourquoi un reset CSS ?

Chaque navigateur applique ses propres styles par défaut aux éléments HTML : marges de paragraphe, taille des titres, puces de listes, apparence des boutons… Ces feuilles de style internes (user agent stylesheet) diffèrent d'un navigateur à l'autre, ce qui oblige à corriger sans cesse les mêmes incohérences avant de commencer à styliser un projet.

Un reset CSS neutralise ces différences en amont : il uniformise le modèle de boîte, remet à plat la typographie, les listes et les formulaires, et applique de bonnes pratiques par défaut (respect de prefers-reduced-motion, gestion accessible du focus, listes avec role="list"…). Le développeur part ainsi d'une base cohérente plutôt que de deviner le rendu par défaut de chaque navigateur.

Placé dans un layer config, ce reset reste facilement surchargeable : vos propres styles, quelle que soit leur spécificité, priment naturellement grâce à l'ordre des layers CSS.