CSS reset moderno, commentato, con generatore di regole | We.Inc
Un CSS reset moderno e breve con ogni regola spiegata. Attiva o disattiva le regole, racchiudi il risultato in un cascade layer e copialo. Include il confronto tra reset e normalize.css.
Un CSS reset moderno è una dozzina circa di regole brevi messe prima dei tuoi stili: dimensionamento border-box su ogni elemento, margini predefiniti azzerati, un'interlinea leggibile, immagini a blocco limitate alla larghezza del contenitore e controlli dei moduli che ereditano il tuo font. Scegli qui sotto le regole che vuoi, poi copia il risultato.
Cosa sistemano le regole principali
Regola
Comportamento predefinito del browser che sostituisce
Perché cambiarlo
box-sizing: border-box
La larghezza include così padding e bordo
margin: 0
Margini su body, titoli, p, elenchi
La spaziatura arriva solo dal tuo CSS
line-height: 1.5 sul body
normal (circa 1.2)
Lettura più facile dei paragrafi
img { display: block; max-width: 100% }
Inline, larghezza naturale
Nessuno spazio sotto le immagini, nessun overflow
font: inherit su input e pulsanti
Font di sistema in piccolo
I moduli si accordano al resto della pagina
Copiare un reset che non capisci significa fare debug di regole che non hai mai scelto. Questa pagina spiega ogni riga in parole semplici e ti permette di costruire la tua versione con degli interruttori, così il file che incolli è breve e ogni riga ha un motivo per esserci.
Leggi la nota accanto a ogni regola, poi attivala o disattivala.
Scegli se racchiudere l'output in @layer reset così qualsiasi tua regola lo supera senza conflitti.
Copia il CSS generato e caricalo prima degli altri fogli di stile.
Metti il reset in un cascade layer. Gli stili fuori da qualsiasi layer battono quelli dentro un layer, indipendentemente dalla specificità.
Non azzerare list-style su ogni ul. La documentazione di Tailwind avverte che VoiceOver potrebbe non annunciare come elenchi gli elenchi senza stile, quindi aggiungi role="list" a ogni elenco che ripulisci.
Non toccare l'outline del focus in un reset. Ridefiniscilo per ogni componente invece di rimuoverlo globalmente.
Se usi Tailwind, hai già un reset chiamato Preflight, quindi un secondo di solito aggiunge solo rumore.
Domande frequenti
Qual è la differenza tra un CSS reset e normalize.css?
Un reset rimuove i valori predefiniti del browser così parti da una pagina quasi vuota. normalize.css mantiene i valori predefiniti utili e corregge solo i punti in cui i browser non sono d'accordo. Molti reset attuali stanno nel mezzo: mantengono i titoli in grassetto e gli elenchi intatti ma eliminano i margini e sistemano il dimensionamento.
Serve ancora un CSS reset nel 2026?
I browser oggi sono molto più allineati di un tempo, quindi i vecchi reset giganti non servono. Uno breve vale comunque la pena, perché valori predefiniti come il dimensionamento content-box, il margine del body e le immagini inline raramente sono ciò che serve a un layout.
Perché usare :where() in un reset?
:where() ha specificità zero, quindi qualsiasi selettore successivo, anche un semplice selettore di elemento, sovrascrive il reset. Questo impedisce alle regole del reset di vincere silenziosamente sugli stili dei componenti.
Dove metto il reset?
Caricalo per primo, prima di qualsiasi altro foglio di stile, oppure importalo dentro @layer reset all'inizio del tuo file CSS principale e dichiara una volta l'ordine dei layer con @layer reset, base, components.
Perché box-sizing viene per primo
Con il content-box predefinito, una card larga 300px con 20px di padding finisce per essere larga 340px. border-box include padding e bordo nella larghezza che hai scritto, che è il modo in cui la maggior parte delle persone si aspetta che funzioni il dimensionamento.
Applicarlo anche agli pseudo-elementi ::before e ::after mantiene le forme decorative coerenti con i box che decorano.
Regole per il testo che invecchiano bene
text-wrap: balance uniforma la lunghezza delle righe dei titoli brevi, e text-wrap: pretty evita una parola orfana sull'ultima riga di un paragrafo. I browser che non conoscono questi valori li ignorano semplicemente, quindi includerli è sicuro.
overflow-wrap: break-word permette a un URL lungo o a un token di codice di andare a capo invece di allargare la pagina di lato su un telefono.
Cosa un reset non dovrebbe fare
Un reset non è un design system. Colori, famiglie di font e scale di spaziatura appartengono al tuo livello base, dove si possono cambiare senza toccare il reset.
Evita regole che danneggiano l'accessibilità, come outline: none su tutto o la rimozione di ogni animazione per tutti i visitatori. Le impostazioni sul movimento vanno in una query prefers-reduced-motion.
Reset, normalize o niente
Tre modi di gestire i valori predefiniti del browser
Approccio
Cosa fa
Adatto a
Hard reset classico
Elimina quasi tutti i valori predefiniti, comprese le dimensioni dei titoli
Raramente necessario oggi
Mantiene i valori predefiniti, corregge le differenze tra browser
Siti di contenuti a cui piace la tipografia predefinita
Reset moderno breve
Sistema solo dimensionamento, margini, media e moduli
La maggior parte dei nuovi siti e app
Reset del framework (Tailwind Preflight)
Incluso nel framework
Progetti che usano già quel framework
Prima e dopo
Una card con e senza border-box
Entrambi i box dicono width: 200px. Solo il secondo mantiene quella larghezza una volta aggiunti padding e bordo.
Dimensionamento border-box
Larghezza e altezza includono padding e bordo.
Rimuovi i margini predefiniti
La spaziatura arriva solo dalle tue regole.
Testo del body leggibile
Un'interlinea più alta e un body a tutta altezza.
Media a blocco e responsive
Nessuno spazio sotto le immagini e nessun overflow.
I moduli ereditano il font
Input e pulsanti si accordano al testo circostante.
Spezza le parole lunghe
Gli URL lunghi vanno a capo invece di uscire dal contenitore.
Titoli bilanciati
Righe di lunghezza uniforme per i titoli brevi.
Niente parole orfane
Evita una parola da sola sull'ultima riga di un paragrafo.
Isola la radice dell'app
Un nuovo stacking context così lo z-index dell'app non entra in conflitto con i portal.
Scorrimento fluido verso le ancore
Solo per i visitatori che non hanno chiesto meno movimento.
Generatore di reset
Selezione predefinita, racchiusa in un cascade layer: