Moderner CSS-Reset, kommentiert, mit Regel-Baukasten | We.Inc
Ein kurzer, moderner CSS-Reset mit Erklärung jeder Regel. Schalte Regeln an oder aus, packe sie in einen Cascade Layer und kopiere sie. Mit Reset vs. normalize.css.
Ein moderner CSS-Reset besteht aus etwa einem Dutzend kurzer Regeln vor deinen eigenen Styles: border-box-Sizing für jedes Element, keine Standard-Margins, eine gut lesbare Zeilenhöhe, Block-Bilder, die auf die Breite ihres Containers begrenzt sind, und Formularelemente, die deine Schrift übernehmen. Wähle unten die gewünschten Regeln aus und kopiere das Ergebnis.
Was die Kernregeln beheben
Regel
Ersetzter Browser-Standard
Warum ändern
box-sizing: border-box
Die Breite schließt dann Padding und Rahmen ein
margin: 0
Margins an body, Überschriften, p, Listen
Abstände kommen nur aus deinem eigenen CSS
line-height: 1.5 auf body
normal (etwa 1.2)
Absätze lesen sich leichter
img { display: block; max-width: 100% }
Inline, natürliche Breite
Keine Lücke unter Bildern, kein Überlauf
font: inherit bei Inputs und Buttons
Systemschrift in kleiner Größe
Formulare passen zum Rest der Seite
Wer einen Reset kopiert, den er nicht versteht, debuggt später Regeln, die er nie ausgewählt hat. Diese Seite erklärt jede Zeile in einfachen Worten und lässt dich deine eigene Version mit Schaltern zusammenstellen. So ist die Datei, die du einfügst, kurz, und jede Zeile hat ihren Grund.
Lies die Notiz neben jeder Regel und schalte sie dann an oder aus.
Entscheide, ob die Ausgabe in @layer reset gepackt wird, damit jede deiner eigenen Regeln ohne Kampf gewinnt.
Kopiere das erzeugte CSS und lade es vor deinen anderen Stylesheets.
Pack den Reset in einen Cascade Layer. Styles außerhalb jedes Layers schlagen Styles in Layern, unabhängig von der Spezifität.
Setze list-style nicht bei jedem ul zurück. Die Tailwind-Dokumentation warnt, dass VoiceOver ungestylte Listen eventuell nicht als Listen ansagt. Füge daher jeder Liste, die du entstylst, role="list" hinzu.
Lass den Fokusrahmen im Reset in Ruhe. Gestalte ihn pro Komponente neu, statt ihn global zu entfernen.
Wenn du Tailwind nutzt, hast du mit Preflight bereits einen Reset, ein zweiter bringt meist nur Rauschen.
Häufige Fragen
Was ist der Unterschied zwischen einem CSS-Reset und normalize.css?
Ein Reset entfernt Browser-Standards, sodass du mit einer fast leeren Seite startest. normalize.css behält nützliche Standards und korrigiert nur die Stellen, an denen Browser sich uneinig sind. Viele aktuelle Resets liegen dazwischen: Sie lassen Überschriften fett und Listen intakt, entfernen aber Margins und korrigieren das Sizing.
Brauche ich 2026 noch einen CSS-Reset?
Browser sind sich heute viel einiger als früher, daher sind die alten Riesen-Resets unnötig. Ein kurzer lohnt sich trotzdem, weil Standards wie content-box-Sizing, das Margin am body und Inline-Bilder selten das sind, was ein Layout braucht.
Warum :where() in einem Reset verwenden?
:where() hat null Spezifität, daher überschreibt jeder spätere Selektor, sogar ein reiner Elementselektor, den Reset. So gewinnen Reset-Regeln nicht still und heimlich gegen Komponenten-Styles.
Wo platziere ich den Reset?
Lade ihn zuerst, vor jedem anderen Stylesheet, oder importiere ihn innerhalb von @layer reset ganz oben in deiner Haupt-CSS-Datei und lege die Layer-Reihenfolge einmal mit @layer reset, base, components fest.
Warum box-sizing an erster Stelle steht
Mit dem Standard content-box wird eine 300px breite Karte mit 20px Padding am Ende 340px breit. border-box rechnet Padding und Rahmen in die angegebene Breite ein, und so erwarten die meisten Leute, dass Größen funktionieren.
Wendest du es auch auf die Pseudoelemente ::before und ::after an, bleiben dekorative Formen konsistent mit den Boxen, die sie schmücken.
Textregeln, die gut altern
text-wrap: balance gleicht die Zeilenlängen kurzer Überschriften an, und text-wrap: pretty verhindert ein einzelnes verwaistes Wort in der letzten Zeile eines Absatzes. Browser, die diese Werte nicht kennen, ignorieren sie einfach, daher kannst du sie bedenkenlos aufnehmen.
overflow-wrap: break-word lässt eine lange URL oder ein Code-Token umbrechen, statt die Seite auf dem Handy seitlich zu verschieben.
Was ein Reset nicht tun sollte
Ein Reset ist kein Designsystem. Farben, Schriftfamilien und Abstandsskalen gehören in deinen eigenen Base-Layer, wo du sie ändern kannst, ohne den Reset anzufassen.
Vermeide Regeln, die der Barrierefreiheit schaden, etwa outline: none für alles oder das Entfernen jeder Animation für alle Besucher. Bewegungseinstellungen gehören in eine prefers-reduced-motion-Query.
Reset, normalize oder nichts
Drei Wege, mit Browser-Standards umzugehen
Ansatz
Was er tut
Gut für
Klassischer harter Reset
Entfernt fast jeden Standard, auch Überschriftengrößen
Heute selten nötig
Behält Standards, behebt Unterschiede zwischen Browsern
Content-Websites, die die Standardtypografie mögen
Kurzer moderner Reset
Korrigiert nur Sizing, Margins, Medien und Formulare
Die meisten neuen Websites und Apps
Framework-Reset (Tailwind Preflight)
Kommt mit dem Framework
Projekte, die bereits auf diesem Framework laufen
Vorher und nachher
Eine Karte mit und ohne border-box
Beide Boxen sagen width: 200px. Nur die zweite behält diese Breite, wenn Padding und Rahmen hinzukommen.
Border-box-Sizing
Breite und Höhe schließen Padding und Rahmen ein.
Standard-Margins entfernen
Abstände kommen nur aus deinen eigenen Regeln.
Gut lesbarer Fließtext
Eine höhere Zeilenhöhe und ein body in voller Höhe.
Block-Medien, responsiv
Keine Grundlinienlücke unter Bildern und kein Überlauf.
Formulare übernehmen die Schrift
Inputs und Buttons passen zum umgebenden Text.
Lange Wörter umbrechen
Lange URLs brechen um, statt überzulaufen.
Ausgewogene Überschriften
Gleichmäßige Zeilenlängen für kurze Überschriften.
Keine verwaisten Wörter
Vermeidet ein einzelnes Wort in der letzten Zeile eines Absatzes.
App-Root isolieren
Ein neuer Stacking Context, damit z-index in der App nicht mit Portals kollidiert.
Sanftes Scrollen zu Ankern
Nur für Besucher, die nicht weniger Bewegung angefordert haben.