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.