Blok czy liniowy? Ten błąd psuje cały układ strony

Na koniec: nie ufaj automatycznym optymalizatorom, które „bezstratnie" zmniejszają rozmiar. Część z nich stosuje agresywne kwantyzacje, które psują krawędzie. Zawsze sprawdź wynikowy plik w powiększeniu, zanim go opublikujesz. Jeśli zależy Ci na jakości, wybierz format bezstratny dla grafiki z ostrymi elementami, a JPEG zostaw dla zdjęć, gdzie naturalne przejścia tonalne maskują drobne artefakty.

Największa pułapka: flex-basis. Domyślnie wynosi auto, co oznacza, że punktem startowym jest szerokość zawartości. Jeśli ustawisz flex: 1, przeglądarka interpretuje to jako flex: 1 1 0%. Wtedy cała wolna przestrzeń jest dzielona po równo, a zawartość nie ma wpływu na proporcje. Gdy chcesz, aby elementy startowały z różnych szerokości i dopiero nadwyżka była dzielona, użyj flex: 1 1 auto. Różnica jest ogromna i to ona najczęściej powoduje, że układ wygląda inaczej niż w projekcie.

Osobna kategoria problemóprzechowywanie w małym mieszkaniu to pliki generowane przez narzędzia. Niektóre zapisują index.html z odwołaniami do modułów i wymagają uruchomienia przez lokalny serwer. Dwuklik pokaże pustą stronę albo błąd w konsoli, mimo że kod jest poprawny. Wtedy trzeba skorzystać z prostego serwera uruchamianego w katalogu projektu — to jedyna różnica między otwarciem pliku a uruchomieniem strony w warunkach zbliżonych do produkcyjnych.

Trzecia pułapka dotyczy zmiany domyślnego zachowania. Można zrobić z linku blok, a z akapitu element liniowy, ale to nie znaczy, że wypada. Zmiana trybu wyświetlania jest narzędziem, nie celem. Jeśli ją stosujesz, sprawdź, czy element nadal ma sens w miejscu, w którym stoi, i czy nie psuje dostępu z klawiatury oraz czytania przez programy wspomagające. Najzdrowsze podejście to zostawić elementom ich naturalną rolę, a układ budować obok, w kontenerach i regułach rozmieszczenia.

Kiedy dzielić tekst, a kiedy go nie dzielić Sekcja większej całości sprawdza się wtedy, gdy kolejne fragmenty mają sens tylko razem. Czytelnik wchodzi w środek i musi wiedzieć, do czego wraca. W praktyce oznacza to spójny system nagłówków: tytuł główny całości, tytuły poszczególnych części, powtarzalny układ wewnątrz każdej z nich. Jeśli decydujesz się na podział, zadbaj o to, żeby każda część miała krótkie wprowadzenie przypominające kontekst. Bez tego osoba, która trafi bezpośrednio do trzeciej sekcji, poczuje się zagubiona i wyjdzie.

Samodzielny artykuł ma jedną wyraźną zaletę: można go przeczytać od początku do końca bez zaglądania gdziekolwiek indziej. Ma własny tytuł, własne wprowadzenie i własne zakończenie. Nadaje się do tematów, które da się wyczerpać w jednym podejściu — na przykład wyjaśnienie jednego pojęcia, opis jednej metody, odpowiedź na jedno pytanie. Uwaga praktyczna: jeśli w trakcie pisania łapiesz się na tym, że wciąż dopisujesz wątki poboczne, to znak, że temat jest za szeroki na jeden tekst. Wtedy lepiej rozbić go na części, zamiast rozdymać akapit do granic czytelności.

Kolejny typowy problem to gubienie znaczników przy użyciu list-style: none na liście nadrzędnej. Jeśli chcesz, aby zagnieżdżona lista nadal miała widoczne punktory, musisz je przywrócić jawnie, np. ul ul list-style: disc; . Inaczej cała struktura straci oznaczenia. Podobnie dzieje się przy używaniu display: flex lub grid na elemencie li – to zaburza domyślne renderowanie znaczników, bo lista przestaje być traktowana jako lista. W takich przypadkach punktory znikają, a ich przywrócenie wymaga dodatkowych zabiegów, np. użycia pseudoelementów ::before.

Co się dzieje, gdy wstawiasz blok do zdania Elementy liniowe — link, wyróżnienie, kursywa, mocne podkreślenie, obrazek w treści — są traktowane jak fragmenty tekstu. Nie łamią linii, nie przyjmują szerokości ani wysokości w taki sam sposób jak bloki, a marginesy pionowe często działają inaczej, niż się oczekuje. Link nie zaczyna nowej linii, bo ma pozostać częścią zdania. Gdy wstawisz blok do środka akapitu, przeglądarka i tak rozerwie akapit. To najczęstszy powód dziwnych przerw w tekście, których autor nie potrafi znaleźć w kodzie.

Praktyczna wskazówka: zamiast polegać na dziedziczeniu, zawsze jawnie definiuj style dla każdego poziomu zagnieżdżenia. Używaj selektorów potomstwa, takich jak ul >li czy ol ol, aby uniknąć niekontrolowanego rozprzestrzeniania się reguł. Pamiętaj też, że znaczniki listy można w pełni kontrolować przez list-style-type, list-style-image i list-style-position. Testowanie w różnych przeglądarkach jest konieczne, bo domyślne style bywają niespójne. Świadome zarządzanie dziedziczeniem pozwala uniknąć wizualnego chaosu i zapewnia przewidywalny wygląd nawet przy głęboko zagnieżdżonych strukturach.

Najczęstszy błąd polega na próbie nadpisania stylów dla zagnieżdżonej listy poprzez selektor odnoszący się do listy nadrzędnej. Przykładowo, reguła ul list-style-type: square; zadziała na wszystkie listy nienależące do innych selektorów, ale jeśli chcesz zmienić znacznik tylko dla listy zagnieżdżonej, musisz użyć bardziej precyzyjnego zapisu, np. ul ul list-style-type: circle; . Warto pamiętać, że przeglądarki domyślnie stosują różne znaczniki dla kolejnych poziomów: pierwszy poziom to zwykle dysk, drugi – okrąg, trzeci – kwadrat. Nie ma jednak gwarancji, że każda przeglądarka robi to identycznie.