4 jednostki CSS, które decydują o skalowaniu czcionki

Typowe błędy? Używanie section jako zamiennika div dla stylowania — to nadużycie. Drugi błąd to wstawianie article wewnątrz innego article bez sensu (np. dla zwykłego akapitu). Zagnieżdżanie jest poprawne, gdy np. komentarz pod postem jest osobnym article wewnątrz głównego article. Trzeci błąd: brak nagłówków w section — to psuje strukturę dokumentu.

Typowe błędy widać gołym okiem. Powtarzanie tego samego identyfikatora na kilku elementach — przeglądarka to zniesie, ale dokument przestaje być poprawny, a skrypt trafi tylko na pierwszy element. Stosowanie identyfikatora tam, gdzie wystarczyłaby klasa, i odwrotnie: nadawanie klas elementom, które występują raz i nigdy się nie powtórzą. Kolejny częsty problem to nazwy klas opisujące wygląd, na przykład „czerwony-tekst", zamiast roli, na przykład „ostrzeżenie". Gdy zmienisz kolorystykę, pierwsza nazwa stanie się kłamstwem.

Praktyczna zasada: każde article powinno mieć własny nagłówek (np. h1–h6). section również wymaga nagłówka, chyba że jest to sekcja czysto pomocnicza. Bez nagłówka tracisz dostępność i czytelność dla robotów wyszukiwarek. Pamiętaj, że section nie może być pusty — jeśli nie masz dla niego nagłówka, użyj div.

Na koniec: dwuklik jest wygodny do szybkiego podglądu, ale nie nadaje się do testowania formularzy, plików cookie ani zapytań sieciowych. Do takich prób uruchom lokalny serwer, a plik index.html traktuj jako punkt wejścia. Warto też trzymać kopię działającej wersji przed każdą zmianą przypisania rozszerzeń — cofnięcie błędnego ustawienia bywa szybsze niż szukanie przyczyny w kodzie.

Jak świadomie wykorzystać kolejność zapi

Praktyczna zasada: rozmiar tekstu i odstępy opieraj na rem, ewentualnie na em w miejscach, gdzie skala ma zależeć od kontekstu, na przykład w komponencie o zmiennym rozmiarze. Pikseli używaj do rzeczy, które naprawdę mają być sztywne — obramowań czy cienkich linii. Testuj stronę przy powiększonej czcionce w przeglądarce i przy różnych szerokościach okna. Jeśli po zmianie ustawień dostępności layout pęka, winne są zwykle piksele tam, gdzie powinny być rem.

Em liczy się od rodzica, rem od korzenia Em jest jednostką relatywną i odnosi się do rozmiaru czcionki elementu nadrzędnego. Jeśli akapit ma 16px, to 1.5em da 24px. Uwaga na zagnieżdżenia: lista wewnątrz elementu o rozmiarze 1.5em, gdzie kolejny poziom też ma 1.5em, daje już 2.25em względem bazy. To najczęstsze źródło niekontrolowanego rozjeżdżania się tekstu. Zagnieżdżone komponenty mnożą wartość przez siebie, więc dwa poziomy to iloczyn, nie suma.

Kolejna różnica to rola w nawigacji. article często staje się osobnym elementem w strukturze dokumentu — może być linkowany, udostępniany. section służy do dzielenia treści wewnątrz article lub main, np. na rozdziały. Jeśli zastanawiasz się, czy dany blok mógłby istnieć jako oddzielna strona, prawdopodobnie powinien być article. W przeciwnym razie to section.

Kiedy inline psuje układ, a kiedy pomaga Elementy inline, takie jak span, a, strong czy em, nie łamią linii. Zajmują dokładnie tyle miejsca, ile wynika z ich treści. Nie ustawisz im width ani height, a padding pionowy nachodzi na sąsiednie linie, nie przesuwając ich. Marginesy działają tylko w poziomie. To częste źródło frustracji: ktoś dodaje padding do linku, wygląda dobrze w jednej linii, a przy zawijaniu tekstu nachodzi na akapit powyżej. Rozwiązaniem jest zmiana display na inline-block albo block.

Procenty działają podobnie do em, bo również liczą się od rodzica. font-size: 100% to zwykle 16px, a 150% da 24px. W praktyce warto używać ich do ustawienia bazowego rozmiaru na html, a resztę budować w rem. Mieszanie jednostek bez planu prowadzi do sytuacji, w której część interfejsu skaluje się z ustawieniami przeglądarki, a część nie — i całość przestaje być przewidywalna.

Inline-block to hybryda. Element nadal ustawia się w linii z innymi, ale zyskuje możliwość ustawiania width, height, margin i padding bez rozrywania układu. Świetnie sprawdza się przy przyciskach, kartach czy elementach nawigacji, które mają stały rozmiar, ale mają stać obok siebie. Uwaga na whitespace w kodzie HTML — spacja między elementami inline-block tworzy dodatkowy odstęp. Można go usunąć, pisząc znaczniki bez odstępu, komentując go albo ustawiając font-size: 0 na rodzicu i przywracając go na dzieciach.

Rem odwołuje się do rozmiaru czcionki elementu głównego, czyli html. Domyślnie to 16px, ale można to zmienić jedną regułą. Ustawienie html font-size: 62.5%; daje 10px, co upraszcza liczenie — 1.6rem to wtedy 16px. Rem nie mnoży się przez zagnieżdżenia, więc ten sam komponent wygląda identycznie niezależnie od miejsca w drzewie DOM. To czyni go najlepszym wyborem do typografii i odstępów w nowoczesnych projektach.