Reset, normalize i style bazowe

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• odróżnić reset CSS od normalize,
• ustawić globalny model pudełkowy przez box-sizing,
• zdefiniować bazowe style dla html i body,
• zabezpieczyć obrazy i media przed overflow,
• ustawić rozsądne domyślne style typografii, linków i formularzy,
• umieścić reset i base w odpowiednich warstwach CSS.

Kontekst praktyczny

Bez wspólnego fundamentu każdy komponent zaczyna walczyć z domyślnymi stylami przeglądarki. Jeden nagłówek ma własne marginesy, obraz wychodzi poza kontener, formularz nie dziedziczy fontu, a rozmiar elementu zmienia się po dodaniu paddingu.

Reset vs normalize

Reset agresywnie usuwa część domyślnych stylów przeglądarki. Normalize zachowuje przydatne domyślne zachowania, ale wyrównuje różnice między przeglądarkami. W nowoczesnych projektach często używa się małego, świadomego resetu zamiast ogromnego pliku.

Kopiuj@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
}

Nie musisz resetować wszystkiego. Najlepszy reset jest mały, zrozumiały i dopasowany do projektu.

Box sizing

Domyślnie szerokość elementu dotyczy tylko contentu. Po dodaniu paddingu i borderu element może stać się większy niż oczekujesz. border-box sprawia, że padding i border mieszczą się w zadanej szerokości.

Kopiuj*,
*::before,
*::after {
  box-sizing: border-box;
}

To jedna z najczęściej stosowanych bazowych reguł CSS, bo upraszcza pracę z layoutem, kartami, formularzami i siatkami.

HTML i body

html i body są podstawą całego dokumentu. W stylach bazowych zwykle ustawiasz wysokość, kolor tekstu, tło, font, wygładzanie tekstu i wysokość linii.

Kopiuj@layer base {
  html {
    min-height: 100%;
  }

  body {
    min-height: 100vh;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    color: #0f172a;
    background: #f8fafc;
    -webkit-font-smoothing: antialiased;
  }
}

Te decyzje powinny być spójne z tokenami projektu. W większym systemie zamiast surowych wartości użyjesz zmiennych, np. var(--color-text).

Media i obrazy

Obrazy, wideo, canvas i SVG łatwo powodują poziomy overflow, jeśli są większe niż kontener. Bazowa reguła max-width: 100% ogranicza ten problem już na starcie.

Kopiujimg,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

display: block usuwa typową przerwę pod obrazem wynikającą z zachowania elementów inline.

Typografia i linki

Style bazowe powinny chronić czytelność. Ustawienia takie jak overflow-wrap, dziedziczenie koloru linków albo widoczny fokus pomagają uniknąć problemów w komponentach.

Kopiujh1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-underline-offset: .18em;
}

:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

Nie usuwaj obrysu fokusu bez zapewnienia równie czytelnej alternatywy. To podstawowy mechanizm dostępności dla użytkowników klawiatury.

Formularze

Elementy formularzy mają wiele domyślnych stylów zależnych od przeglądarki i systemu. Bazowe reguły powinny wyrównać font, zachować dostępność i nie blokować późniejszego stylowania komponentów.

Kopiujbutton,
input,
textarea,
select {
  font: inherit;
}

textarea {
  resize: vertical;
}

button:disabled {
  cursor: not-allowed;
}

Nie resetuj formularzy tak mocno, aby utracić ich czytelne stany. Bazowy CSS ma ułatwiać komponentom pracę, nie ukrywać ich zachowania.

Demo stylów bazowych

Demo porównuje przypadkowe domyślne zachowanie z uporządkowanym fundamentem. Różnica nie polega na ozdobach, tylko na kontroli odstępów, rozmiaru, mediów i formularzy.

Najczęstsze błędy początkujących

• Kopiowanie dużego resetu bez zrozumienia, co zmienia.
• Globalne usuwanie stylów list, przycisków i linków bez zachowania dostępności.
• Usuwanie outline dla fokusu bez czytelnej alternatywy.
• Brak globalnego box-sizing: border-box.
• Zapominanie o bazowych regułach dla obrazów i mediów.
• Mieszanie resetu z komponentami w jednej przypadkowej części arkusza.

Mini zadanie

Przygotuj mały fundament CSS dla nowej strony statycznej.

• Utwórz warstwy reset, base, components i utilities.
• Dodaj globalne box-sizing: border-box.
• Ustaw bazowe style dla body: font, kolor, tło i line-height.
• Zabezpiecz media przez display: block i max-width: 100%.
• Sprawdź, czy linki i fokus klawiatury pozostają czytelne.
• Dodaj bazowe reguły formularzy bez niszczenia stanów dostępności.

Checklista

• Rozumiem różnicę między resetem i normalize.
• Wiem, dlaczego globalne box-sizing upraszcza layout.
• Potrafię ustawić przewidywalne style dla html i body.
• Potrafię zabezpieczyć obrazy i media przed overflow.
• Nie usuwam dostępnych stanów fokusu bez zamiennika.
• Trzymam reset i style bazowe przed komponentami w architekturze CSS.

Podsumowanie lekcji

Reset, normalize i style bazowe tworzą pierwszy poziom architektury CSS. Dobrze ustawiony fundament zmniejsza liczbę wyjątków w komponentach, poprawia przewidywalność layoutu i pomaga zachować dostępność od początku projektu.

Kolejny krok roadmapy to struktura plików CSS i skalowanie arkusza.