Przy pierwszym zetknięciu z CSS wydaje się, że reguły działają intuicyjnie: jeśli ustawisz kolor akapitu, to akapit zmieni kolor. W praktyce kod rośnie, pojawiają się kolejne arkusze, style inline, klasy i identyfikatory, a przeglądarka musi jakoś zdecydować, które polecenie jest ważniejsze. Odpowiada za to kaskada i specyficzność. Kaskada to mechanizm rozstrzygania konfliktów między regułami pochodzącymi z różnych źródeł – od arkusza przeglądarki, przez style użytkownika, po autorskie arkusze witryny. Gdy dwie reguły mają taką samą wagę, wygrywa ta, która pojawia się później. To dlatego kolejność dołączania plików CSS ma znaczenie i potrafi zaskoczyć, gdy przeniesiesz fragment kodu w inne miejsce.

Specyficzność wchodzi do gry, gdy reguły mają różne selektory. Każdy selektor otrzymuje swoją wagę: identyfikatory są silniejsze od klas i atrybutów, a te z kolei od elementów i pseudoelementów. Selektor uniwersalny ma zerową specyficzność. W praktyce oznacza to, że #menu a wygra z .menu a, nawet jeśli ten drugi zapisano później. Co więcej, style inline mają jeszcze większą moc, a !important potrafi wywrócić wszystko do góry nogami. Zrozumienie tych zależności pozwala świadomie projektować arkusze zamiast co chwilę dodawać kolejne !important, które po tygodniach stają się koszmarem w utrzymaniu.

Osobny temat to dziedziczenie, które nie zawsze działa tak, jak podpowiada intuicja. Właściwości związane z tekstem, jak kolor czy krój czcionki, naturalnie przechodzą z rodzica na potomków. Inne, na przykład obramowania, marginesy czy tło, nie są dziedziczone. Dlatego ramka ustawiona na elemencie nadrzędnym nie pojawi się na jego dzieciach. Warto o tym pamiętać, gdy próbujesz naprawić układ strony i zastanawiasz się, czemu kolor tekstu działa, a obramowanie już nie – na css-create.pl znajdziesz praktyczne wyjaśnienie tego zjawiska, które pomaga uniknąć typowych pułapek. Świadome korzystanie z wartości inherit, initial i unset daje pełną kontrolę nad tym, co faktycznie trafia do elementu.

Kaskada, specyficzność i dziedziczenie tworzą razem system, który bywa frustrujący, ale jest logiczny. Gdy zrozumiesz, że przeglądarka nie zgaduje, tylko porównuje wagi i kolejność, debugowanie CSS staje się znacznie prostsze. Warto budować selektory możliwie płaskie, unikać identyfikatorów w stylowaniu i nie nadużywać !important. Dzięki temu kod pozostaje przewidywalny, a Ty przestajesz walczyć z narzędziem, które ma Ci służyć.