Przy etykietach drukowanych, na przykład na dokumentach przewozowych, jedna etykieta obejmująca kilka pól oznacza zwykle wspólny nagłówek sekcji. Ważne, aby nie łączyć w ten sposób danych, które muszą być odczytane osobno — na przykład numeru przesyłki i kodu sortującego. W systemach cyfrowych etykieta zbiorcza bywa powiązana z jednym polem ukrytym, które przechowuje całość, ale wtedy tracisz możliwość filtrowania i walidacji pojedynczych składowych.

Podział nie jest przypadkowy. Dziedziczą się rzeczy związane z typografią i prezentacją tekstu: color, oświetlenie w salonie font-family, font-size, font-weight, line-height, text-align, letter-spacing. Nie dziedziczą się właściwości modelu pudełkowego i tła: margin, padding, border, background, width, height, display. Logika jest prosta: jeśli ustawiasz wygląd liter, ma to dotyczyć całego tekstu w kontenerze. Jeśli ustawiasz obramowanie, dotyczy konkretnego pudełka, a nie wszystkiego, co się w nim znajduje.

Media queries to reguły CSS, które pozwalają stosować różne style w zależności od właściwości ekranu. Najczęściej używa się ich do rozróżnienia wąskich i szerokich widoków, ale można też sprawdzać orientację, rozdzielczość czy możliwość druku. Reguła ma postać @media (warunek) { ... }. Warunek to najczęściej max-width lub min-width, wyrażony w pikselach. Przykład: @media (max-width: 600px) .menu display: none; ukryje menu na ekranach o szerokości do 600 px. Warto pamiętać, że media queries nie zmieniają HTML, a jedynie warunkowo włączają fragmenty arkusza stylów. Dlatego styl bazowy piszemy dla jednego układu, a resztę modyfikujemy w zapytaniach.

Plan tygodnia to dobry materiał do nauki scalania komórek, bo naturalnie zawiera bloki zajęte przez jedną rzecz: szkolenie od poniedziałku do środy, dyżur w piątek po południu, urlop ciągnący się przez kilka dni. Tabela oparta na zwykłych komórkach wymusza powtarzanie tego samego napisu w każdym dniu i wygląda jak lista, nie jak kalendarz. Atrybuty colspan i rowspan rozwiązują problem, ale tylko wtedy, gdy policzy się kolumny i wiersze przed napisaniem pierwszej komórki.

Najczęstsze błędy przy BEM wynikają z nadużywania struktury. Pierwszy to tworzenie zagnieżdżeń typu card__header__title — to nie jest poprawny zapis, bo element nie może mieć własnego elementu. Drugi to modyfikatory bez klasy bazowej: sam card--featured w HTML bez card sprawi, że style bazowe znikną. Trzeci to nazywanie bloków od wyglądu, np. red-box; lepiej nazywać od roli, In case you liked this informative article and you wish to get details relating to Lebenskunst.Berlin i implore you to stop by the webpage. np. alert. Czwarty, bardzo częsty w małych projektach, to mnożenie modyfikatorów dla każdej kombinacji — po miesiącu robi się z tego nieczytelna siatka.

Decyzję najlepiej podjąć, zadając sobie proste pytanie: czy te pola są zawsze wypełniane razem i czy ich rozdzielenie coś psuje? Jeśli tak — jedna etykieta wystarczy. Jeśli nie — rozdziel opisy. Nie ma jednej uniwersalnej reguły, ale konsekwencja w całym formularzu lub dokumencie liczy się bardziej niż sam wybór wariantu.

Praktyczna zasada jest taka: procenty w flex-basis mają sens, gdy kontener ma stabilną szerokość i kiedy pamiętasz o box-sizing, marginesach oraz o tym, że flex-grow i flex-shrink mogą zmienić finalny rozmiar. W pozostałych przypadkach lepiej użyć flex: 1 i pozwolić algorytmowi rozdzielić miejsce, zamiast walczyć z procentami, które i tak zostaną przeliczone na nowo.

Przy projektowaniu dla szerokiego ekranu często wystarczy zwiększyć marginesy, zmienić liczbę kolumn w siatce lub rozszerzyć kontener. Dla wąskiego ekranu kluczowe jest uproszczenie nawigacji, zmniejszenie odstępów i ustawienie elementów jeden pod drugim. Zamiast tworzyć osobne arkusze dla każdego przedziału, lepiej użyć jednego zestawu reguł i nadpisywać tylko to, co konieczne. Warto też sprawdzić, czy na bardzo szerokich ekranach treść nie rozciąga się na całą szerokość — wtedy przydaje się max-width na kontenerze głównym. Media queries to narzędzie elastyczne, ale wymaga dyscypliny: im mniej reguł, tym łatwiej później cokolwiek zmienić.

W kontenerach z flex-wrap: wrap procenty działają inaczej, bo elementy przechodzą do nowej linii, a każda linia ma własny rozkład miejsca. Wtedy flex-basis: 50% może dać dwa elementy w rzędzie, ale tylko jeśli suma marginesów i obramowań nie przekroczy szerokości kontenera. Przy trzech elementach po 33% wystarczy kilka pikseli odstępu, by trzeci spadł do kolejnej linii. Rozwiązaniem jest używanie calc(), na przykład flex-basis: calc(33.333% - 10px), albo rezygnacja z procentów na rzecz jednostek, które nie zależą od szerokości rodzica.

Kiedy procenty się sprawdzają, a kiedy szkodzą Procenty działają przewidywalnie, gdy kontener ma ustaloną szerokość i nie zmienia jej w trakcie układania. Wtedy flex-basis: 50% daje dwa elementy po połowie, o ile nie mają marginesów ani obramowań wliczanych do szerokości. Problem pojawia się przy kontenerach z szerokością zależną od zawartości — na przykład gdy rodzic jest elementem flex lub grid bez zdefiniowanej bazy. Wówczas procent może zostać zignorowany albo policzony względem rozmiaru, który sam dopiero się ustala. Efekt bywa taki, że elementy nachodzą na siebie lub rozjeżdżają się przy zmianie rozmiaru okna.