Wie setzen Sie die Stile in Ihren Projekten zurück?

Ich verwende meistens normalize.css als Basis. Es sorgt dafür, dass die Stilelemente in allen Browsern einheitlich und vorhersehbar aussehen, während nützliche Standardstile erhalten bleiben.

// Beispiel eines Teils von normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Manchmal füge ich meinen kleinen Reset oder eine Reihe von Basistilen über normalize.css hinzu, um spezifische Aufgaben zu erfüllen oder um Margins und Paddings bei bestimmten Elementen zu entfernen.

// Zusätzliche Stile
*,
*::before,
*::after {
  box-sizing: border-box; /* Macht die Arbeit mit Größen vorhersehbarer */
}

body {
  min-height: 100vh; /* Dehnt den Body auf die gesamte sichtbare Höhe aus */
  scroll-behavior: smooth; /* Sanftes Scrollen zu Ankern */
  text-rendering: optimizeSpeed; /* Bevorzugt Geschwindigkeit bei der Visualisierung */
}

a {
  text-decoration: none; /* Entfernt Unterstreichungen bei Links */
  color: inherit; /* Links erben die Textfarbe */
}

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

button,
input,
textarea,
select {
  font: inherit; /* Formularelemente erben die Schrift vom Elternteil */
}

img {
  max-width: 100%; /* Bilder überschreiten den Container nicht */
  display: block; /* Entfernt den unteren Abstand bei Inline-Block-Elementen */
}

Die Wahl eines bestimmten Ansatzes hängt von den Projektanforderungen und dem verwendeten Framework ab. Normalize.css ist ein guter Kompromiss zwischen einem vollständigen Reset und den Standardstilen.