Media queries, które łamią układ, bo zapominasz o tym jednym

Kolejna pułapka to nadpisywanie tego samego stylu w kilku miejscach. Jeśli w bazie masz display: block, a w media query dodajesz display: flex, to jest w porządku. Ale gdy w bazie ustawiasz szerokość, a potem w kilku progach ją poprawiasz, kod staje się kruchy. Zamiast tego projektuj komponenty tak, aby same się dopasowywały: używaj flex-wrap, grid z auto-fit oraz jednostek takich jak rem, %, fr i minmax. Wtedy część media queries w ogóle przestaje być potrzebna.
Funkcja rgb() przyjmuje trzy liczby od 0 do 255 lub wartości procentowe. Przykład: rgb(255, 0, 0) to czerwień. Można też podać kanał alfa jako czwarty parametr: rgba(255, 0, 0, 0.5) daje półprzezroczystą czerwień. Od niedawna składnia rgb() również akceptuje czwarty parametr, więc rgba() staje się opcjonalne, ale dla kompatybilności lepiej trzymać się starszej formy. Uwaga na spacje – po przecinkach muszą być, inaczej deklaracja będzie niepoprawna.

Praktyczna zasada: najpierw sięgnij po klasę, potem po znacznik, a identyfikator traktuj jako ostateczność. Jeśli musisz nadać styl jednemu elementowi, dodaj mu klasę zamiast identyfikatora. Kod będzie spójny, a przenoszenie komponentu w inne miejsce nie skończy się niespodzianką. Kolejny częsty błąd to mieszanie konwencji nazw — raz przycisk-glowny, raz btnPrimary. If you have any inquiries about the place and how to use Lebenskunst.Berlin, you can get hold of us at our own web site. Ustal jeden sposób zapisu i trzymaj się go w całym projekcie.

Na koniec o kolejności. Przeglądarka rozstrzyga konflikty na podstawie wagi selektora, a przy równej wadze — kolejności wystąpienia. Dlatego identyfikator wygrywa z klasą, klasa ze znacznikiem. Gdy styl się nie nakłada, sprawdź najpierw, czy nie nadpisuje go reguła o większej wadze, a nie szukaj błędu w samym elemencie. Świadome używanie trzech typów selektorów wystarcza, by kod był przewidywalny i łatwy do zmiany.

Media queries wyglądają banalnie: warunek, nawias, kilka reguł w środku. Problem zaczyna się, gdy strona rozjeżdża się na telefonie albo przeciwnie — na szerokim monitorze treść rozlewa się na całą szerokość i trudno ją czytać. Najczęstszy błąd to traktowanie breakpointów jako sztywnych liczb przepisanych z projektu. Breakpoint ma wynikać z treści, nie z modelu telefonu. Jeśli akapit zaczyna się łamać brzydko przy 640 px, to właśnie tam ustawiasz zmianę, a nie na 768 px, bo tak wypadało w szablonie.

Zanim zaczniesz liczyć proporcje, sprawdź, czy kontener ma określoną szerokość w tym samym wymiarze. Dla flex-direction: row liczy się szerokość, dla column — wysokość. To drugie bywa pułapką: rodzic często nie ma ustalonej wysokości, więc flex-basis: 25% nie zadziała. Ustawienie height: 100% na rodzicu też nie pomoże, oświetlenie w salonie jeśli jego własny rodzic nie ma wysokości. Najpierw zapewnij wymiar bazowy, dopiero potem ustawiaj procenty.

Na szerokim ekranie najczęstszy problem to zbyt długa linia tekstu. Powyżej pewnej szerokości czytanie staje się męczące, dlatego warto ograniczyć kontener, np. max-width: 70ch i wyśrodkować go marginesami. Drugi błąd to rozciąganie siatki na siłę — karty robią się wtedy ogromne i puste. Lepiej zwiększyć liczbę kolumn albo dodać odstępy. Pamiętaj też, że media query nie naprawi złej struktury HTML. Jeśli sekcja nie ma logicznego porządku, żaden breakpoint tego nie ukryje.

Klasa i identyfikator — podobne, ale nie zamienne Klasę przypisujesz atrybutem class i możesz jej użyć wielokrotnie na tej samej stronie. To najczęstszy wybór przy komponentach: przyciskach, kartach, komunikatach. Identyfikator ustawiasz przez id i zgodnie ze specyfikacją może wystąpić tylko raz w dokumencie. Ma też większą wagę w kaskadzie niż klasa, co bywa pułapką — nadpisanie stylu identyfikatora wymaga jeszcze silniejszego selektora albo !important. Do stylowania lepiej używać klas, a identyfikator zostawić do kotwic w nawigacji i powiązań z etykietami formularzy.

Selektor znacznika to nazwa elementu HTML, na przykład p, h2 czy ul. Działa globalnie — dotyczy wszystkich elementów tego typu na stronie. Sprawdza się przy ustalaniu podstaw typografii: marginesów akapitów, rozmiaru nagłówków, list. Problem pojawia się, gdy chcesz wyróżnić jeden konkretny akapit. Nadpisanie stylu znacznika wymaga wtedy dodatkowej reguły i często kończy się walką z kaskadą. Typowy błąd to zerowanie marginesów wszystkich nagłówków, a potem ręczne dodawanie odstępów w każdym miejscu osobno.

Jeśli zależy ci na idealnym wyrównaniu do górnej krawędzi kontenera, a nie tylko do sąsiada w linii, vertical-align: top nie wystarczy. Element inline-block nie zna wysokości rodzica w kontekście wyrównania pionowego. Wtedy lepiej przełączyć dzieci na display: inline-block i użyć flexboxa na rodzicu z align-items: flex-start. To rozwiązanie eliminuje większość problemów z linią bazową i białymi spacjami, a przy okazji daje przewidywalne odstępy. Warto je stosować zawsze, gdy układ ma więcej niż dwa elementy w rzędzie.