Sobes.tech
Middle

Jak resetujete styly ve svých projektech?

sobes.tech AI

Odpověď od AI

Obvykle používám normalize.css jako základ. Umožňuje sjednotit styly prvků a udělat je předvídatelnějšími ve všech prohlížečích, přičemž zachovává užitečné výchozí styly.

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

body {
  margin: 0;
}

main {
  display: block;
}

Občas přidám svůj malý reset nebo sadu základních stylů nad normalize.css pro specifické úkoly nebo pro nulování okrajů a výplní u některých prvků.

// Další styly
*,
*::before,
*::after {
  box-sizing: border-box; /* Umožňuje práci s rozměry být předvídatelnější */
}

body {
  min-height: 100vh; /* Natáhne tělo na celou viditelnou výšku */
  scroll-behavior: smooth; /* Plynulé posouvání na odkazy */
  text-rendering: optimizeSpeed; /* Upřednostňuje rychlost vykreslování */
}

a {
  text-decoration: none; /* Odstraňuje podtržení odkazů */
  color: inherit; /* Odkazy dědí barvu textu */
}

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

button,
input,
textarea,
select {
  font: inherit; /* Elementy formuláře dědí písmo od rodiče */
}

img {
  max-width: 100%; /* Obrázky nepřesahují kontejner */
  display: block; /* Odstraňuje spodní mezeru u inline-blocků */
}

Volba konkrétního přístupu závisí na požadavcích projektu a používaném frameworku. Normalize.css je dobrým kompromisem mezi úplným resetem a výchozími styly.