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.