Sobes.tech
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.