Comment réinitialisez-vous les styles dans vos…

J'utilise généralement normalize.css comme base. Il uniformise les styles des éléments pour qu'ils soient plus prévisibles dans tous les navigateurs, tout en conservant des styles par défaut utiles.

// Exemple d'une partie de normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Parfois, j'ajoute ma petite réinitialisation ou un ensemble de styles de base au-dessus de normalize.css pour des tâches spécifiques ou pour supprimer marges et paddings de certains éléments.

// Styles supplémentaires
*,
*::before,
*::after {
  box-sizing: border-box; /* Rend la gestion des tailles plus prévisible */
}

body {
  min-height: 100vh; /* Étire le corps à toute la hauteur visible */
  scroll-behavior: smooth; /* Défilement fluide vers les ancres */
  text-rendering: optimizeSpeed; /* Favorise la vitesse de rendu */
}

a {
  text-decoration: none; /* Supprime le soulignement des liens */
  color: inherit; /* Les liens héritent de la couleur du texte */
}

ul,
ol {
  list-style: none; /* Supprime les puces de la liste */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Les éléments de formulaire héritent de la police du parent */
}

img {
  max-width: 100%; /* Les images ne dépassent pas leur conteneur */
  display: block; /* Supprime l'espace en dessous des éléments inline-block */
}

Le choix d'une approche dépend des exigences du projet et du framework utilisé. normalize.css est un bon compromis entre un reset complet et les styles par défaut.

Comment réinitialisez-vous les styles dans vos projets?