Sobes.tech
Middle

Ako resetujete štýly vo svojich projektoch?

sobes.tech AI

Odpoveď od AI

Obvykle používam normalize.css ako základ. Umožňuje jednotné a predvídateľné štýly prvkov vo všetkých prehliadačoch, pričom zachováva užitočné predvolené štýly.

// Príklad časti normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Občas pridám svoj malý reset alebo súbor základných štýlov nad normalize.css pre špecifické úlohy alebo na nulovanie okrajov a výplní niektorých prvkov.

// Doplnkové štýly
*,
*::before,
*::after {
  box-sizing: border-box; /* Uľahčuje prácu s rozmermi */
}

body {
  min-height: 100vh; /* Natiahne telo na celú viditeľnú výšku */
  scroll-behavior: smooth; /* Plynulé posúvanie na odkazy */
  text-rendering: optimizeSpeed; /* Uprednostňuje rýchlosť vykresľovania */
}

a {
  text-decoration: none; /* Odstraňuje podčiarknutie odkazov */
  color: inherit; /* Odkazy dedičia farbu textu */
}

ul,
ol {
  list-style: none; /* Odstraňuje značky zo zoznamov */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Formulárové prvky dedičia písmo od rodiča */
}

img {
  max-width: 100%; /* Obrázky nepresahujú kontajner */
  display: block; /* Odstraňuje pri inline-block elementoch spodný priestor */
}

Výber konkrétneho prístupu závisí od požiadaviek projektu a použitých frameworkov. normalize.css je dobrým kompromisom medzi úplným resetom a predvolenými štýlmi.