Hoe reset je de stijlen in je projecten?

Ik gebruik meestal normalize.css als basis. Het zorgt ervoor dat de stijlen van elementen in alle browsers uniform en voorspelbaar zijn, terwijl het nuttige standaardstijlen behoudt.

// Voorbeeld van een deel van normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Soms voeg ik mijn kleine reset of een set basisstijlen toe bovenop normalize.css voor specifieke taken of om marges en opvulling van bepaalde elementen te verwijderen.

// Aanvullende stijlen
*,
*::before,
*::after {
  box-sizing: border-box; /* Maakt werken met afmetingen voorspelbaarder */
}

body {
  min-height: 100vh; /* Rekkt de body uit tot de volledige zichtbare hoogte */
  scroll-behavior: smooth; /* Zachte scroll naar ankers */
  text-rendering: optimizeSpeed; /* Geeft de voorkeur aan snelheid van rendering */
}

a {
  text-decoration: none; /* Verwijdert onderstreping van links */
  color: inherit; /* Links erven de tekstkleur */
}

ul,
ol {
  list-style: none; /* Verwijdert lijstmarkeringen */
  padding: 0;
  margin: 0;
}

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

img {
  max-width: 100%; /* Afbeeldingen verlaten de container niet */
  display: block; /* Verwijdert de onderliggende ruimte bij inline-blocks */
}

De keuze voor een specifieke aanpak hangt af van de projectvereisten en het gebruikte framework. Normalize.css is een goede compromis tussen een volledige reset en standaardstijlen.