Gdy układasz treść strony, nagłówki to struktura, nie wielkość
Typowy błąd to rozdrabnianie treści na siłę. Autor tworzy pięć krótkich artykułów, z których każdy powtarza ten sam wstęp i definicje. Czytelnik traci czas, a wyszukiwarki widzą materiał o niskiej wartości. Odwrotny błąd to wrzucanie wszystkiego do jednego tekstu. Powstaje rozdział na kilka tysięcy słów, w którym nikt nie potrafi znaleźć odpowiedzi na swoje pytanie. Sekcje pomagają uporządkować taki tekst, ale nie zastąpią decyzji o podziale.<br>
<br>
<br>
<br>
Pisanie dłuższego tekstu ułatwia podział na mniejsze jednostki. Najczęściej pojawia się pytanie, czy dany fragment ma być samodzielnym artykułem, czy tylko sekcją wewnątrz większej całości. Odpowiedź nie jest uniwersalna, bo zależy od tego, jak czytelnik ma trafić na treść i czego od niej oczekuje.<br>
<br>
<br>
<br>
Nie ma jednej słusznej odpowiedzi. Wybór między artykułem a sekcją to decyzja o tym, jak czytelnik ma korzystać z tekstu. Kieruj się jego potrzebą, nie wygodą redagowania. Jeśli fragment broni się sam — publikuj go osobno. Jeśli nie — zostaw jako część większej całości i zadbaj, by kontekst był czytelny.<br>
<br>
<br>
<br>
Osobny problem to utrata nowej linii wewnątrz samego bloku tekstowego. Element flex nie gubi znaków nowej linii z tekstu — gubi je, gdy zamieniasz tekst na elementy flex albo gdy nadpisujesz white-space. Jeśli akapit jest dzieckiem flexa, nadal zachowuje się jak blok tekstowy, chyba że ustawisz mu display: inline lub podobnie. Wtedy nowe linie przestają być respektowane, a tekst zlewa się w jeden ciąg. Rozwiązaniem jest przywrócenie white-space: pre-line albo pozostawienie domyślnego normal i pilnowanie, by nie nadpisywać go bez potrzeby.<br>
<br>
<br>
<br>
Na koniec: dwuklik jest wygodny do szybkiego podglądu, ale nie nadaje się do testowania formularzy, plików cookie ani zapytań sieciowych. Do takich prób uruchom lokalny serwer, a plik index.html traktuj jako punkt wejścia. Warto też trzymać kopię działającej wersji przed każdą zmianą przypisania rozszerzeń — cofnięcie błędnego ustawienia bywa szybsze niż szukanie przyczyny w kodzie.<br>
<br>
<br>
<br>
Uważaj też na skalowanie. Powiększanie obrazu po kompresji stratnej uwypukla artefakty na krawędziach. Zawsze skaluj przed kompresją, a nie po. Podobnie z kadrowaniem – jeśli wytniesz fragment z już skompresowanego JPEG, a potem zapiszesz go ponownie, krawędzie w miejscu cięcia staną się jeszcze gorsze. Pamiętaj, że formaty takie jak PNG i WebP bezstratny nie generują takich artefaktów, ale mogą mieć większy rozmiar pliku – to świadomy kompromis.<br>
<br>
<br>
<br>
Jak szybko sprawdzić, która reguła wygrywa Najprościej otworzyć narzędzia deweloperskie w przeglądarce i kliknąć na sporny element. W panelu stylów zobaczysz listę reguł od najważniejszej do najmniej istotnej. Przekreślone właściwości oznaczają, że zostały nadpisane przez inną regułę. To szybsze niż ręczne liczenie, zwłaszcza gdy w projekcie jest wiele arkuszy. Warto też sprawdzić, czy nie działa !important — ten dodatek wygrywa ze wszystkim, co nie ma !important o wyższej specyficzności. Stosuj go oszczędnie, bo psuje naturalną kaskadę i utrudnia późniejsze zmiany.<br>
<br>
<br>
<br>
Pamiętaj też o kolejności. Dwie reguły o tej samej specyficzności — na przykład .box i .card — rozstrzyga kolejność w pliku. Jeśli obie pasują do elementu, wygrywa ta późniejsza. Dlatego importowanie arkuszy w złej kolejności potrafi zepsuć cały układ. Warto trzymać style w jednym miejscu i ładować je w przewidywalnej kolejności. Gdy dochodzi do konfliktu, najpierw sprawdź specyficzność, potem kolejność, a na końcu !important. To pozwoli ci szybko znaleźć winowajcę i naprawić problem bez zgadywania.<br>
<br>
<br>
<br>
Jeżeli publikujesz w kilku miejscach, pamiętaj o spójności. Samodzielny artykuł musi mieć komplet informacji, ale nie może dublować w całości treści, która już istnieje jako sekcja. Najprościej: najpierw napisz duży tekst z sekcjami, a dopiero potem zdecyduj, które fragmenty usamodzielnić. Wtedy widzisz, co faktycznie da się wyciąć i rozwinąć w osobny materiał, a co pozostanie zależne od reszty.<br>
<br>
<br>
<br>
Kiedy używać kolumny, a kiedy zawijania Jeśli potrzebujesz pionowego stosu bloków, kolumna jest najprostsza. Pamiętaj jednak, że w kolumnie oś główna biegnie z góry na dół, więc justify-content steruje odstępami w pionie, a align-items w poziomie. To odwrócenie intuicji bywa źródłem błędów: ktoś ustawia justify-content: center i dziwi się, że bloki nie wyśrodkowały się w poziomie. W kolumnie odpowiada za to align-items.<br>
<br>
<br>
<br>
Specyficzność liczy się w trzech kolumnach: identyfikatory, klasy (oraz atrybuty i pseudoklasy), elementy (i pseudoelementy). Selektor #naglowek ma wagę 1-0-0, .menu to 0-1-0, a div to 0-0-1. Gdy łączysz je w jeden selektor, sumujesz wartości z każdej kolumny. Na przykład #naglowek .menu li daje 1-1-1. Wartości nie przenoszą się między kolumnami — 11 klas nigdy nie przebije jednego identyfikatora, bo liczy się pozycja, a nie suma wszystkich liczb.