CSS bez zgadywania: model pudełkowy, Flexbox i Grid

Wszystko jest pudełkiem

Każdy element na stronie to prostokąt złożony z czterech warstw: treści, wypełnienia (padding), obramowania (border) i marginesu (margin). Domyślnie szerokość ustawiona przez width dotyczy tylko treści, więc padding i border ją powiększają. To źródło wielu frustracji: ustawiasz kolumnę na 50%, dodajesz padding i nagle nie mieści się w wierszu.

Rozwiązanie to jedna reguła, którą warto wklejać na początku każdego arkusza stylów:

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

Po jej dodaniu width obejmuje treść, padding i border. Obliczenia stają się intuicyjne. Otwórz narzędzia deweloperskie przeglądarki (klawisz F12) i najedź na dowolny element – zobaczysz jego pudełko z zaznaczonymi warstwami w różnych kolorach.

Kaskada i specyficzność bez tajemnic

Gdy kilka reguł dotyczy tego samego elementu, przeglądarka musi zdecydować, która wygrywa. Decydują o tym trzy rzeczy, w tej kolejności: pochodzenie i ważność reguły, specyficzność selektora oraz kolejność w kodzie.

Specyficzność możesz traktować jak wynik punktowy. Selektor identyfikatora (#menu) jest silniejszy niż klasa (.menu), a klasa silniejsza niż nazwa znacznika (nav). Jeśli dwa selektory mają tę samą siłę, wygrywa ten zapisany później.

Praktyczny wniosek: stylizuj głównie za pomocą klas, unikaj identyfikatorów w CSS i traktuj !important jak gaśnicę – do sytuacji awaryjnych, nie do codziennego użytku. Płaska, przewidywalna specyficzność to najlepszy prezent dla przyszłego siebie.

Flexbox: układ w jednym kierunku

Flexbox służy do rozmieszczania elementów w jednym wymiarze – w wierszu albo w kolumnie. Idealnie sprawdza się w menu, paskach narzędzi, kartach z przyciskiem przyklejonym do dołu i wszędzie tam, gdzie trzeba coś wyśrodkować.

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

Właściwość justify-content rozkłada elementy wzdłuż osi głównej, a align-items wyrównuje je w poprzek. Dzięki gap nie musisz już dodawać marginesów każdemu elementowi osobno. Z kolei flex-wrap: wrap pozwala elementom przejść do nowej linii, gdy zabraknie miejsca.

Kluczowe jest zrozumienie, że Flexbox ustawia się na rodzicu, a działa na jego bezpośrednich dzieciach. Jeśli właściwość nie przynosi efektu, sprawdź najpierw, czy dodałeś display: flex do właściwego elementu. Na dzieciach możesz dodatkowo użyć flex-grow, żeby element zajął wolne miejsce, albo flex-shrink: 0, żeby nie dał się ścisnąć – przydaje się to na przykład przy ikonach obok długiego tekstu.

Grid: układ w dwóch wymiarach

CSS Grid kontroluje jednocześnie wiersze i kolumny. To najlepsze narzędzie do szkieletu całej strony, galerii zdjęć i siatek kart. Poniższa reguła tworzy responsywną galerię bez ani jednego zapytania o media:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

Funkcja repeat(auto-fit, minmax(220px, 1fr)) mówi: „zmieść tyle kolumn, ile się da, każda co najmniej 220 pikseli szerokości, a wolne miejsce podziel równo”. Na telefonie zobaczysz jedną kolumnę, na laptopie trzy lub cztery.

Grid pozwala też nazywać obszary układu właściwością grid-template-areas, dzięki czemu szkielet strony czyta się niemal jak rysunek. To wygodne przy zmianach układu w media queries.

Zmienne CSS i porządek w arkuszu

Gdy arkusz stylów rośnie, pojawia się problem powtarzających się wartości: ten sam odcień zieleni w dwudziestu miejscach, te same odstępy wpisane ręcznie. Rozwiązaniem są zmienne CSS, czyli własne właściwości definiowane zwykle w selektorze :root, na przykład --kolor-akcent czy --odstep. Używasz ich przez funkcję var(), a zmiana w jednym miejscu aktualizuje całą stronę.

Warto też od początku ustalić kolejność w pliku: najpierw zmienne i reset, potem style bazowe dla znaczników, dalej układ strony, komponenty i na końcu klasy pomocnicze. Taki porządek sprawia, że kaskada działa na Twoją korzyść, a nie przeciwko Tobie. Nadawaj klasom nazwy opisujące rolę elementu, na przykład .karta czy .przycisk-glowny, a nie wygląd, jak .czerwony-tekst.

Jak debugować CSS jak zawodowiec

Kiedy układ się rozjeżdża, nie zgaduj. Przejdź przez krótką procedurę:

• Otwórz narzędzia deweloperskie i sprawdź, czy Twoja reguła w ogóle dotyczy elementu. Przekreślona właściwość oznacza, że przegrała z inną.
• Dodaj tymczasowo outline: 1px solid red do podejrzanych elementów, żeby zobaczyć ich prawdziwe granice.
• Skorzystaj z nakładek Flexbox i Grid w narzędziach przeglądarki – pokazują linie siatki i odstępy.
• Sprawdź, czy któryś element nie ma stałej szerokości w pikselach, która rozpycha układ na telefonie.
• Usuwaj reguły po kolei, aż problem zniknie. Ostatnia usunięta reguła to winowajca.

Z czasem zaczniesz rozpoznawać wzorce: element wystający poza ekran to najczęściej stała szerokość lub długi, niełamany tekst, a dziwny odstęp między blokami to zwykle łączenie się marginesów pionowych.

Najczęstsze pytania