Sobes.tech
Middle

Jak resetujesz style w swoich projektach?

sobes.tech AI

Odpowiedź od AI

Zazwyczaj używam normalize.css jako podstawy. Ujednolica style elementów, sprawiając, że są bardziej przewidywalne we wszystkich przeglądarkach, zachowując przy tym przydatne style domyślne.

// Przykład części normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Czasami dodaję swój mały reset lub zestaw podstawowych stylów na wierzch normalize.css dla specyficznych zadań lub do wyzerowania marginesów i paddingów niektórych elementów.

// Dodatkowe style
*,
*::before,
*::after {
  box-sizing: border-box; /* Ułatwia pracę z rozmiarami */
}

body {
  min-height: 100vh; /* Rozciąga body na całą widoczną wysokość */
  scroll-behavior: smooth; /* Płynne przewijanie do kotwic */
  text-rendering: optimizeSpeed; /* Preferuje szybkość renderowania */
}

a {
  text-decoration: none; /* Usuwa podkreślenie z linków */
  color: inherit; /* Linki dziedziczą kolor tekstu */
}

ul,
ol {
  list-style: none; /* Usuwa znaczniki list */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Elementy formularza dziedziczą czcionkę od rodzica */
}

img {
  max-width: 100%; /* Obrazy nie wychodzą poza kontener */
  display: block; /* Usuwa dolny margines dla inline-block */
}

Wybór konkretnego podejścia zależy od wymagań projektu i używanego frameworka. Normalize.css to dobry kompromis między pełnym resetem a domyślnymi stylami.