Moderne CSS-reset met uitleg en een regelbouwer | We.Inc
Een korte moderne CSS-reset met uitleg bij elke regel. Zet regels aan of uit, verpak het resultaat in een cascade layer en kopieer het. Inclusief reset vs normalize.css.
Een moderne CSS-reset bestaat uit een stuk of twaalf korte regels die vóór uw eigen stijlen komen: border-box-afmetingen op elk element, standaardmarges op nul, een leesbare regelhoogte, afbeeldingen als blokelement die niet breder worden dan hun container, en formulierelementen die uw lettertype overnemen. Kies hieronder de regels die u wilt en kopieer het resultaat.
Wat de kernregels oplossen
Regel
Browserstandaard die hij vervangt
Waarom aanpassen
box-sizing: border-box
De breedte omvat dan ook padding en rand
margin: 0
Marges op body, koppen, p, lijsten
Ruimte komt alleen nog uit uw eigen CSS
line-height: 1.5 op body
normal (ongeveer 1.2)
Alinea's lezen makkelijker
img { display: block; max-width: 100% }
Inline, natuurlijke breedte
Geen kier onder afbeeldingen, geen overloop
font: inherit op inputs en buttons
Systeemlettertype in een klein formaat
Formulieren passen bij de rest van de pagina
Wie een reset kopieert die hij niet begrijpt, zit later regels te debuggen die hij nooit heeft gekozen. Deze pagina legt elke regel in gewone woorden uit en laat u met schakelaars uw eigen versie bouwen, zodat het bestand dat u plakt kort is en elke regel er met een reden staat.
Lees de toelichting naast elke regel en zet hem dan aan of uit.
Kies of u de uitvoer wilt verpakken in @layer reset, zodat al uw eigen regels er zonder strijd van winnen.
Kopieer de gegenereerde CSS en laad hem vóór uw andere stylesheets.
Zet de reset in een cascade layer. Stijlen buiten een layer winnen van stijlen in een layer, ongeacht de specificiteit.
Reset list-style niet op elke ul. De documentatie van Tailwind waarschuwt dat VoiceOver lijsten zonder stijl mogelijk niet als lijst aankondigt, dus voeg role="list" toe aan elke lijst die u kaal maakt.
Laat de focusomlijning met rust in een reset. Geef hem per component een nieuwe stijl in plaats van hem overal te verwijderen.
Gebruikt u Tailwind, dan hebt u al een reset genaamd Preflight, dus een tweede voegt meestal alleen ruis toe.
Veelgestelde vragen
Wat is het verschil tussen een CSS-reset en normalize.css?
Een reset haalt browserstandaarden weg, zodat u begint met een bijna lege pagina. normalize.css houdt nuttige standaarden en corrigeert alleen de plekken waar browsers het oneens zijn. Veel huidige resets zitten daartussen: koppen blijven vet en lijsten intact, maar marges verdwijnen en de afmetingen worden rechtgezet.
Heb ik in 2026 nog een CSS-reset nodig?
Browsers zijn het veel meer eens dan vroeger, dus de oude, enorme resets zijn overbodig. Een korte is nog steeds de moeite waard, omdat standaarden zoals content-box-afmetingen, de body-marge en inline afbeeldingen zelden zijn wat een lay-out wil.
Waarom :where() gebruiken in een reset?
:where() heeft een specificiteit van nul, dus elke latere selector, zelfs een kale elementselector, overschrijft de reset. Zo winnen resetregels niet ongemerkt van componentstijlen.
Waar zet ik de reset?
Laad hem als eerste, vóór elke andere stylesheet, of importeer hem binnen @layer reset bovenaan uw hoofd-CSS-bestand en declareer de volgorde van de layers één keer met @layer reset, base, components.
Waarom box-sizing voorop staat
Met de standaard content-box wordt een kaart van 300px breed met 20px padding uiteindelijk 340px breed. border-box neemt padding en rand op in de breedte die u schreef, en zo verwachten de meeste mensen dat afmetingen werken.
Door het ook toe te passen op de pseudo-elementen ::before en ::after blijven decoratieve vormen consistent met de vakken die ze versieren.
Tekstregels die goed verouderen
text-wrap: balance maakt de regellengtes van korte koppen gelijkmatiger, en text-wrap: pretty voorkomt één los weeswoord op de laatste regel van een alinea. Browsers die deze waarden niet kennen, negeren ze gewoon, dus ze zijn veilig om op te nemen.
overflow-wrap: break-word laat een lange URL of codetoken afbreken in plaats van de pagina op een telefoon zijwaarts te duwen.
Wat een reset niet moet doen
Een reset is geen designsysteem. Kleuren, lettertypefamilies en schalen voor witruimte horen in uw eigen basislayer, waar u ze kunt wijzigen zonder de reset aan te raken.
Vermijd regels die de toegankelijkheid schaden, zoals outline: none op alles of alle animatie voor elke bezoeker verwijderen. Instellingen voor beweging horen in een prefers-reduced-motion-query.
Reset, normalize of niets
Drie manieren om met browserstandaarden om te gaan
Aanpak
Wat het doet
Geschikt voor
Klassieke harde reset
Haalt bijna elke standaard weg, ook de groottes van koppen
Tegenwoordig zelden nodig
Houdt standaarden, lost verschillen tussen browsers op
Contentsites die van standaardtypografie houden
Korte moderne reset
Lost alleen afmetingen, marges, media en formulieren op
De meeste nieuwe sites en apps
Framework-reset (Tailwind Preflight)
Wordt met het framework meegeleverd
Projecten die dat framework al gebruiken
Voor en na
Een kaart met en zonder border-box
Beide vakken zeggen width: 200px. Alleen het tweede houdt die breedte zodra padding en rand worden toegevoegd.
Border-box-afmetingen
Breedte en hoogte omvatten padding en rand.
Standaardmarges verwijderen
Ruimte komt alleen uit uw eigen regels.
Leesbare broodtekst
Een grotere regelhoogte en een body over de volle hoogte.
Media als blok, responsief
Geen kier op de basislijn onder afbeeldingen en geen overloop.
Formulieren nemen het lettertype over
Inputs en buttons passen bij de omringende tekst.
Lange woorden afbreken
Lange URL's lopen door naar de volgende regel in plaats van over te lopen.
Gebalanceerde koppen
Gelijkmatige regellengtes voor korte koppen.
Geen weeswoorden
Voorkomt één los woord op de laatste regel van een alinea.
De app-root isoleren
Een nieuwe stacking context, zodat z-index in de app niet botst met portals.
Vloeiend scrollen naar ankers
Alleen voor bezoekers die niet om minder beweging hebben gevraagd.