Middle
Come reimpostate gli stili nei vostri progetti?
sobes.tech AI
Risposta dell'AI
Di solito utilizzo normalize.css come base. Uniforma gli stili degli elementi rendendoli più prevedibili in tutti i browser, mantenendo comunque gli stili utili di default.
// Esempio di parte di normalize.css
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
main {
display: block;
}
A volte aggiungo il mio piccolo reset o un set di stili di base sopra normalize.css per compiti specifici o per azzerare margini e padding di alcuni elementi.
// Stili aggiuntivi
*,
*::before,
*::after {
box-sizing: border-box; /* Rende il lavoro con le dimensioni più prevedibile */
}
body {
min-height: 100vh; /* Allunga il body a tutta l'altezza visibile */
scroll-behavior: smooth; /* Scorrimento fluido verso gli ancoraggi */
text-rendering: optimizeSpeed; /* Preferisce la velocità di rendering */
}
a {
text-decoration: none; /* Rimuove la sottolineatura dai link */
color: inherit; /* I link ereditano il colore del testo */
}
ul,
ol {
list-style: none; /* Rimuove i marcatori di lista */
padding: 0;
margin: 0;
}
button,
input,
textarea,
select {
font: inherit; /* Gli elementi di form ereditano il font dal genitore */
}
img {
max-width: 100%; /* Le immagini non escono dal contenitore */
display: block; /* Rimuove lo spazio inferiore negli inline-block */
}
La scelta di un approccio specifico dipende dai requisiti del progetto e dal framework utilizzato. normalize.css è un buon compromesso tra un reset completo e gli stili di default.