Pourquoi un reset CSS

Les navigateurs appliquent chacun leurs propres styles par défaut : marges, paddings, tailles de police, bordures, etc. Cela provoque des différences d'affichage entre Chrome, Firefox, Safari, Edge et les autres.

Pour éviter ces différences, les développeurs commencent souvent leur feuille de style par une mise à zéro des styles, appelée reset CSS.

Les avantages d'un reset CSS

• Supprimer les marges et paddings par défaut
• Uniformiser le rendu entre navigateurs
• Éviter les comportements imprévisibles
• Partir d'une base propre et cohérente

Les trois types de reset

1. Reset total

On efface tout pour repartir de zéro. C'est simple et radical.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. Normalize.css

Au lieu d'effacer, on harmonise les styles entre navigateurs. C'est un fichier externe très utilisé dans les projets professionnels.

3. Reset personnalisé

Le plus courant aujourd'hui : chaque développeur crée sa propre base.

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

body {
    margin: 0;
    font-family: sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

Grâce à un reset, tu travailles sur un terrain plat, propre et prévisible. C'est un réflexe de pro et un excellent réflexe à adopter dès maintenant.