Wat is een CSS Reset?

CSS Reset — is een set regels in CSS die bedoeld is om uniforme basisstijlen voor alle HTML-elementen standaard in te stellen, en de verschillen in de standaardstijlen van browsers te overwinnen. Dit helpt om een voorspelbaarder en cross-browser compatibel uiterlijk van webpagina's te garanderen.

Belangrijkste doelen van CSS Reset:

• Verwijderen of resetten van standaard marges (margin, padding) en randen.
• Reset van standaard lettergrootte en regelafstand voor koppen, paragrafen, enz.
• Uniforme opmaak van lijsten (ul, ol).
• Reset van stijlen voor tabellen, formulieren, afbeeldingen en andere elementen.

Voorbeeld van een basis CSS Reset:

/*
   CSS Reset: Reset de standaard stijlen van browsers
   voor een uniforme basisweergave van elementen.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Inclusief padding en border in de totale breedte/hoogte */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Font-smoothing */
}

img, picture, video, canvas, svg {
  display: block; /* Verwijdert de standaard ruimte onder inline afbeeldingen */
  max-width: 100%; /* Zorgt dat afbeeldingen niet buiten de container komen */
}

input, button, textarea, select {
  font: inherit; /* Erft het lettertype van de ouder */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Laat lange woorden afbreken */
}

Er zijn verschillende varianten van CSS Reset, zoals Eric Meyer's Reset CSS of Normalize.css. Normalize.css behoudt nuttige standaardstijlen en corrigeert alleen die welke compatibiliteitsproblemen veroorzaken. De keuze hangt af van het project en de voorkeuren van de ontwikkelaar.