BEM czy płaskie klasy — co wybrać w małym projekcie

Scalanie komórek robi się atrybutami colspan i rowspan. Tu zaczynają się problemy, bo przeglądarka liczy kolumny na podstawie wszystkich wierszy. Jeśli w jednym wierszu scalisz dwie komórki w poziomie, w kolejnych wierszach musisz dostarczyć odpowiednią liczbę pozostałych komórek. Niedobór lub nadmiar komórek rozjeżdża całą tabelę, a błąd bywa trudny do zauważenia, gdy treść jest krótka. Zasada jest prosta: przed pisaniem kodu ustal, ile kolumn ma mieć najszerszy wiersz, porady remontowe i pilnuj tej liczby w każdym kolejnym wierszu.

W małym projekcie kusi, żeby nazywać klasy po prostu button, card, header. Na starcie działa. Problem zaczyna się w momencie, gdy ten sam przycisk ma wystąpić w dwóch wariantach, a karta w trzech kontekstach. Po miesiącu nikt nie pamięta, czy active dotyczy menu, czy kafelka, i czy small to rozmiar czcionki, czy paddingu. BEM wprowadza porządek, który nie wymaga dokumentacji.

Flex-basis w procentach liczy się zawsze od rozmiaru kontenera rodzica wzdłuż osi głównej, a nie od szerokości samego elementu. Jeśli flex-direction to row, wartość procentowa odnosi się do szerokości rodzica; jeśli column — do jego wysokości. To pierwsza rzecz, która psuje układy, bo autorzy zakładają, że elementy podzielą się równo, a tymczasem jeden z nich dostaje bazę liczoną od zupełnie innej płaszczyzny.

Ostatnia pułapka to odstępy. Gap działa świetnie, ale przy auto-fill wiersze z jedną kartą zostawiają puste tory, które nie znikają. Jeśli to przeszkadza, dodaj justify-content: center lub zamień na auto-fit. Sprawdź układ przy 320px, 768px i 1440px bez zmiany kodu — jeśli karty nie wychodzą za ekran i nie zostawiają jednej samotnej na końcu, siatka działa. Wtedy media query do szerokości kolumn przestają być potrzebne.

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.

Kiedy blok w flexie zachowuje się jak element liniowy Warto wiedzieć, że element flexowy nie jest już elementem blokowym w klasycznym sensie. Jego display jest blokowany do wartości block lub inline-block w zależności od tego, jak został ustawiony, https://lebenskunst.berlin/index.php?title=flex_a_elementy_blokowe:_Kiedy_znika_nowa_linia_w_tekście ale i tak podlega regułom flexu. Dlatego width: 100% na dziecku flexa nie zawsze da nową linię — element może się skurczyć kolory ścian do salonu rozmiaru treści, jeśli inne dzieci mają większe flex-grow lub flex-shrink. Nowa linia pojawi się tylko wtedy, gdy oś główna jest pionowa albo gdy włączysz zawijanie i element nie zmieści się w bieżącym wierszu.

Kontener flex z domyślnym ustawieniem flex-direction: row układa dzieci w jednej linii. Element blokowy, np. div czy p, normalnie zajmuje całą szerokość i wymusza przejście do nowej linii. W flexie ta zasada przestaje działać, bo element staje się tzw. elementem flexowym i jego zachowanie zależy od osi głównej oraz od tego, czy może się rozciągać. Efekt jest taki, że zamiast nowej linii pojawia się ściskanie, zawijanie tekstu w środku wąskiego pudełka albo rozjeżdżanie się sąsiednich elementów.

Drugi typowy błąd to zbyt duża wartość minimalna. minmax(400px, 1fr) na telefonie o szerokości 360px wymusi jedną kolumnę szerszą niż ekran i pojawi się poziome przewijanie. Wartość minimalna musi być mniejsza niż najwęższy realny viewport, na którym strona ma działać. Bezpieczny zakres to zwykle 200–280px. Pamiętaj też, że grid nie skaluje obrazków ani tekstu wewnątrz karty — jeśli treść nie ma width: 100% i overflow, karta pęknie niezależnie od siatki.

If you have almost any questions concerning wherever and also how you can work with Wykończenie wnęTrz, you are able to e mail us from the internet site. Podstawą jest repeat z auto-fill i jednostką elastyczną. Zapis grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) oznacza: upakuj tyle kolumn, ile zmieści się w dostępnej szerokości, ale żadna nie może być węższa niż 240px ani szersza niż udział w wolnym miejscu. Przeglądarka sama decyduje, czy w rzędzie zmieszczą się dwie, trzy czy pięć kart. Nie musisz pisać ani jednego media query.

Podsumowując: jeśli element blokowy w kontenerze flex nie przechodzi do nowej linii, sprawdź przede wszystkim flex-direction, flex-wrap oraz flex-basis. W większości przypadków wystarczy zmiana kierunku na kolumnę albo dodanie flex: 1 1 100%. Unikaj polegania na samym width: 100% bez zrozumienia, jak działa oś główna. Testuj układ przy różnych szerokościach okna, bo to najszybciej ujawnia, czy nowa linia faktycznie się tworzy, czy tylko przypadkowo wygląda poprawnie.