Qu'est-ce que le reset CSS ?

Le "reset" ou la "remise à zéro" en français est un concept qui consiste à supprimer un certains nombre de valeurs CSS par défaut des navigateurs en ayant deux objectifs majeurs :

• Repartir sur une base neutre pour designer l'entièreté de votre site ou de votre application à partir de zéro
• Gommer les différences d'affichage par défaut entre les différents navigateurs

Au fil de leurs différentes mises à jour, les styles par défaut des navigateurs tendent à se ressembler de plus en plus, mais il reste encore des différences qui peuvent parfois poser problème lorsque l'on intègre un design en CSS. Voici quelques exemples des différences entre les navigateurs :

• Les tailles des polices par défaut
• La graisse de certains textes
• Les marges internes et externes de tailles différentes
• Les bordures inégales
• Le mode d'affichage de plusieurs balises
• ...

Un reset CSS vous permettra donc de vous affranchir de ces différences et de repartir de zéro pour votre design, mais attention, il ne faut pas faire n'importe quoi !

Les bonnes pratiques

Ce qu'il ne faut pas faire

On serait tout de suite tenté d'utiliser un petit morceau de CSS afin de corriger un maximum de problèmes d'un seul coup, en ajoutant par exemple :

/* Don't do that */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

Le problème est qu'en remettant à zéro les marges et les bordures de tous les éléments, nous venons tout simplement de faire disparaitre tous nos champs de formulaires.

Certes notre style est (en partie) remis à zéro, mais notre page n'est même plus utilisable en l'état.

Utiliser un reset fonctionnel déjà existant

Pour arriver à écrire un reset à la fois intelligent et complet, il faut avoir une très bonne connaissance du CSS mais aussi des différences entre les nombreux navigateurs afin de ne cibler uniquement que les éléments intéressant afin d'éviter tout effet de bord.

C'est notamment ce qu'a fait Eric Meyer, dont le script de reset est largement utilisé et disponible ici : https://meyerweb.com/eric/tools/css/reset/

Je vous ai préparé une démo en ligne afin que vous puissiez voir la différence entre une page avec un style par défaut et une page remise à zéro avec le script ci-dessus :

• Version par défaut : https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/index.html
• Version reset :https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/reset.html

Avantages et inconvénients

Nous avons déjà évoqués les principaux avantages de cette méthode au début de l'article, mais nous n'avons pas parlé des inconvénients qui font que ce concept est un peu controversé.

Comme vous avez pu le voir dans la démo précédente, une page remise à zéro peut être stylisée bien plus facilement mais elle perd aussi beaucoup de sémantique donné par le style par défaut du navigateur.

Les différents niveaux de titres ont par exemple le même rendu, la hiérarchisation des données est donc incompréhensible jusqu'à ce que vous réécriviez un style personnalisé de A à Z, et c'est pour moi le plus gros inconvénient.

Avec un reset, il est trop facile d'oublier de réappliquer un style minimum pour respecter à la fois la hiérarchisation des données et l'accessibilité des utilisateur sur tous les éléments.

Je pense que le reset est un outil puissant si vous comptez travailler sur un thème complet, ou un "framework" CSS et que vous êtes sûr de créer votre propre style par défaut de A à Z.

Dans le cas contraire, je vous conseillerais plutôt de vous penchez vers la "normalisation" du CSS.

Reset vs Normalize

Contrairement à un reset, la normalisation du CSS consiste simplement à réajuster tous les styles par défaut des navigateurs afin d'éviter les différences majeurs de styles et de positionnement.

L'avantage étant que votre page gardera toute sa sémantique et vous pourrez venir simplement appliquer votre design personnalisé en vous appuyant sur un style par défaut solide et normalisé.

Pour se faire, c'est très simple, il vous suffit d'inclure par exemple le fichier normalize.css disponible sur le site : https://necolas.github.io/normalize.css/

Ce script de normalisation est notamment utilisé par des plateformes et sites web comme Twitter, GitHub, Medium et même Bootstrap, vous pouvez donc vous appuyer dessus pour vos propres réalisations !

Si vous souhaitez comparer le rendu d'une page classique et d'une page normalisée, je vous ai mis à disposition une démo : https://nicolasbrondin.github.io/css-reset-vs-normalize-demo/normalize.html

En plus

Pour retrouver toutes les démos de cet article (default, reset et normalize), elles sont toutes disponibles dans ce dépôt Github public !