Réinitialisation CSS – 30 secondes de code

De nos jours, les navigateurs présentent bien mieux le HTML de manière cohérente, ce qui rend les réinitialisations CSS du passé largement inutiles. Cependant, Les styles par défaut des navigateurs ne sont pas particulièrement excellents. dans la plupart des cas, c’est pourquoi il existe des tonnes de réinitialisations CSS. En m’inspirant de certaines d’entre elles, voici ma réinitialisation CSS, accompagnée d’une explication de la raison pour laquelle j’ai choisi d’inclure chaque règle.

html {
  max-width: 70ch;
  margin: auto;
  padding: 3em 1em;
  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
  line-height: 1.75;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 3em 0 1em;
}

p, ul, ol {
  margin-bottom: 2em;
  color: #1d1d1d;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

pre, code, kbd {
  font-family: monospace, monospace;
  font-size: 1em;
}

• html:
  • max-width – Utilisation ch pour définir la largeur maximale au milieu de la plage de lisibilité optimale (60-80 caractères).
  • margin – Centrer le contenu sur la page.
  • padding – Éviter le texte bord à bord sur les petites fenêtres d’affichage.
  • font-family – Utilisez la pile de polices du système pour assurer le meilleur rendu possible des polices. system-ui est une nouvelle famille de polices génériques qui remplace -apple-system et BlinkMacSystemFont.
  • font-size – Utilisez une taille de police plus grande pour une meilleure lisibilité et pour suivre les tendances récentes en matière de design.
  • line-height – Utilisez une hauteur de ligne plus importante pour accroître la clarté visuelle.
• body:
  margin – Suppression de la marge par défaut dans tous les navigateurs.
• h1–h6:
  • margin – Utilisez des marges plus grandes pour les en-têtes afin d’améliorer la hiérarchie visuelle.
• p, ul, ol:
  • margin-bottom – Ajout d’un espacement entre les éléments textuels.
  • color – Adoucir la couleur du texte pour améliorer la lisibilité.
• small:
  • font-size – Correction des différences de taille de police entre les navigateurs.
• sub, sup:
  • font-size – Correction des différences de taille de police entre les navigateurs.
  • line-height – Empêche les éléments d’affecter la hauteur des lignes.
  • position – Positionnement des éléments par rapport au parent.
  • vertical-align – Aligne les éléments sur la ligne de base.
  • bottom, top – Positionner correctement les éléments.
• pre, code, kbd:
  • font-family – Utilisez des polices monospace pour les éléments de code.
  • font-size – Correction des différences de taille de police entre les navigateurs.