CSS

Piszesz .sidebar .card { color: blue; }, ładujesz stronę, a karta jest wciąż czerwona przez regułę dodaną godzinę wcześniej: .card { color: red; }. Nowa reguła jest niżej w pliku. I mimo to przegrywa. Przeglądarka porównuje dwa selektory przy użyciu stałego systemu punktowego, a .sidebar .card dostaje wyższy wynik niż .card, niezależnie od tego, który napisano później. Ten system punktowy to specyficzność. Kiedy już umiesz ją liczyć od razu, “czemu mój CSS się nie stosuje” staje się arytmetyką. Nie ma to nic wspólnego z layoutem: Grid czy Flexbox decyduje, gdzie znajduje się element, a specyficzność decyduje, która reguła ustawia jego kolor albo rozmiar, gdy dwie reguły są w konflikcie. ...

Budujesz dashboard: header, sidebar, główna treść, footer. Sięgasz po Flexbox, bo to narzędzie layoutowe, które znasz, a dwadzieścia minut później masz trzy zagnieżdżone kontenery display: flex, sidebar, który nie utrzyma swojej szerokości bez magicznej liczby, i footer, który unosi się w połowie strony, gdy treści jest mało. To nie jest błąd Flexbox — to Ty używasz narzędzia jednowymiarowego do problemu dwuwymiarowego. Flexbox rozkłada przestrzeń wzdłuż jednej linii: wiersza albo kolumny. Grid ustawia elementy w wierszach i kolumnach naraz, a te wiersze i kolumny odnoszą się do siebie. Większość zamieszania wokół Grid kontra Flexbox wynika z przeskoczenia tej różnicy. ...