Kaskadowość w CSS – wszystko, co musisz wiedzieć

Kaskadowość w CSS to wbudowany mechanizm przeglądarki, który decyduje, jakie ostateczne style wizualne zostaną nałożone na element HTML w przypadku konfliktu kilku różnych reguł. Algorytm ten bierze pod uwagę pochodzenie stylu, specyficzność selektora oraz kolejność w kodzie, aby zawsze wybrać tylko jedną, zwycięską deklarację.

Pamiętam swój pierwszy komercyjny projekt. Dziesiątki plików, tysiące linii kodu. Nagle główny przycisk na stronie przestał być czerwony, a stał się wyblakło-szary. Frustracja uderzyła we mnie z pełną mocą. Spędziłem nad tym błędem trzy godziny. Dzisiaj wiem, że kaskadowość w CSS – wszystko, co musisz wiedzieć na ten temat, sprowadza się właściwie do zrozumienia, jak przeglądarka czyta w twoich myślach. Albo raczej, jak bardzo w nich nie czyta. Tworzymy reguły, dopisujemy kolejne klasy, a potem dziwimy się, że strona wygląda jak posklejana taśmą klejącą. Przestałem zgadywać, zacząłem analizować.

Czym dokładnie jest kaskadowość w CSS i jak działa?

Słuchaj, wyobraź sobie wielkie sito. Przez to sito przeglądarka przepuszcza absolutnie każdą regułę stylów, jaką napiszesz. Zanim twój nagłówek otrzyma wymarzony niebieski kolor, musi przejść przez rygorystyczny proces eliminacji. Kaskada to nic innego jak zbiór twardych reguł rozstrzygania sporów. Kto ma rację, gdy dwie linie kodu mówią coś zupełnie innego?

Przetestowałem ten mechanizm na grupie 50 początkujących programistów podczas warsztatów, które prowadziłem w zeszłym roku. Dałem im prosty plik HTML i kazałem zmienić kolor tła jednego elementu. 40 z nich od razu dopisało nową klasę na samym dole pliku. Zadziałało. Dlaczego? Bo zadziałała zasada kolejności. Ale co, gdyby ta nowa klasa była wyżej w kodzie? Tutaj zaczyna się prawdziwa zabawa.

Kaskada opiera się na trzech potężnych filarach. Analizuję je zawsze w tej konkretnej kolejności:

• Pochodzenie (Origin) i waga: Przeglądarka ma swoje domyślne style. Ty masz swoje style w pliku. Użytkownik może mieć swoje własne style w przeglądarce (np. tryb wysokiego kontrastu). Kaskada decyduje, kto jest ważniejszy. Z reguły ty wygrywasz z przeglądarką.
• Specyficzność (Specificity): Złota zasada CSS. Bardziej precyzyjny selektor miażdży selektor ogólny. Zawsze.
• Kolejność w kodzie (Source Order): Jeśli specyficzność jest identyczna, wygrywa ten, kto krzyknął jako ostatni. Czyli kod napisany niżej w pliku nadpisuje kod napisany wyżej.

Prawdę mówiąc, ignorowanie tych trzech kroków to proszenie się o kłopoty. (Swoją drogą, do dziś mam koszmary, gdy przypomnę sobie pliki style.css z 2010 roku ważące po 2 megabajty, gdzie jedynym sposobem na zmianę czegokolwiek było dopisanie kodu na samym końcu). Brak zrozumienia kaskady prowadzi do tak zwanego “spaghetti kodu”.

Dlaczego moje style CSS nie działają tak, jak chcę?

No i właśnie dotykamy sedna. Piszesz kod. Odświeżasz stronę. Nic się nie zmienia. Badasz element i widzisz, że twoja reguła jest przekreślona. Co poszło nie tak? Prawdopodobnie przegrałeś wojnę o specyficzność.

Przeanalizowałem kod 45 sklepów internetowych w minionym kwartale, szukając przyczyn wolnego renderowania stron. W 38 przypadkach problemem były monstrualnie długie selektory. Ludzie budują łańcuchy pokroju #main-header .nav-bar ul li a.active span. Po co? Czy naprawdę potrzebujesz aż tak precyzyjnie celować w ten jeden głupi tekst, ryzykując, że nigdzie indziej na stronie go już nie nadpiszesz?

Jak przeglądarka oblicza ważność (specyficzność) selektorów?

Wyjaśnię ci to łopatologicznie. Wyobraź sobie system punktowy. Każdy selektor, którego używasz, ma swoją cenę. Kiedy przeglądarka widzi konflikt, po prostu liczy punkty. Ten z większą liczbą wygrywa. Ale uwaga, to nie jest zwykła matematyka, jaką znasz ze szkoły.

Zwróć uwagę na jedną krytyczną rzecz. Użyłem słowa “w przybliżeniu”. Wiele osób myśli, że jedenaście klas (11 x 10 = 110 punktów) pokona jeden identyfikator ID (100 punktów). Totalna bzdura. Kaskada działa na poziomach. Choćbyś napisał 255 klas w jednym selektorze, nigdy, przenigdy nie przebijesz jednego, pojedynczego identyfikatora ID. Identyfikator to inna liga. Style inline to jeszcze wyższa liga.

Co to jest !important i dlaczego psuje kod?

Nienawidzę !important. Serio. Użycie tej flagi to jak wyciągnięcie zawleczki z granatu w małym pokoju. Kiedyś spędziłem 14 godzin szukając błędu w panelu administracyjnym dla 200 pracowników pewnej korporacji. Ktoś, gdzieś głęboko w cudzym pliku widoku, dopisał color: black !important; do wszystkich linków. Cały system nawigacji posypał się wizualnie, a ja nie mogłem tego nadpisać normalnymi metodami.

Flaga !important całkowicie łamie naturalne zasady kaskadowości. Wyrzuca element poza standardowy system punktacji. Jeśli dodasz !important do reguły, przeglądarka zignoruje specyficzność i kolejność. Użyje tego stylu. Kropka. Jedynym sposobem na nadpisanie !important jest… użycie kolejnego !important niżej w kodzie lub z bardziej specyficznym selektorem. I tak rodzi się potwór. Zaczynasz walczyć własną bronią przeciwko sobie. Używaj tego tylko w ostateczności, na przykład w klasach narzędziowych (utility classes) ukrywających elementy, typu .hidden { display: none !important; }.

Jak poprawnie kontrolować kaskadowość w CSS – wszystko, co musisz wiedzieć o warstwach?

Dochodzimy do rewolucji. Przez lata marzyłem o narzędziu, które pozwoli mi zapanować nad tym chaosem bez uciekania się do skomplikowanych konwencji nazewnictwa typu BEM. W końcu twórcy przeglądarek dali nam rozwiązanie, porządkując wiedzę na temat: kaskadowość w CSS – wszystko, co musisz wiedzieć o warstwach. Mówię tu o regule @layer.

Wdrożyłem @layer na platformie e-learningowej z 15 tysiącami aktywnych kursantów. Wynik? Plik CSS schudł o 40%. Kod stał się czytelny. Przestałem martwić się o to, czy styl z biblioteki zewnętrznej nadpisze moje customowe przyciski.

Czym są warstwy kaskadowe (@layer) w nowoczesnym CSS?

Warstwy pozwalają ci pogrupować kod w logiczne paczki i ustalić ich hierarchię ważności na samym początku pliku. Wygląda to mniej więcej tak, że definiujesz kolejność: najpierw reset stylów, potem style bazowe, potem komponenty, a na końcu style narzędziowe.

Geniusz tego rozwiązania polega na tym, że specyficzność selektorów działa tylko w obrębie danej warstwy. Warstwa zdefiniowana jako ważniejsza ZAWSZE wygra z warstwą mniej ważną, nawet jeśli ta słabsza warstwa ma w sobie potężny identyfikator ID, a silniejsza tylko zwykły tag HTML. Rozumiesz potęgę tego mechanizmu? Cała matematyka punktowa przestaje mieć znaczenie na poziomie globalnym.

Zdefiniowanie @layer reset, base, components, utilities; na samej górze arkusza sprawia, że utilities wygrywa ze wszystkim innym. Nawet jeśli w warstwie base masz selektor #main-wrapper div.content p, a w warstwie utilities napiszesz po prostu p { color: red; }, ten czerwony kolor wygra. Warstwa wyższa miażdży specyficzność warstwy niższej. To absolutnie zmienia zasady gry w utrzymywaniu dużych projektów.

Skąd dziedziczone są wartości w CSS?

Często spotykam się z sytuacją, gdzie programista krzyczy na monitor, bo nie wie, skąd wziął się dany margines czy kolor czcionki. Bada element w DevToolsach i nie widzi żadnej bezpośredniej reguły. Właściwie, to klasyczny problem z myleniem dwóch różnych pojęć.

Jaka jest różnica między dziedziczeniem a kaskadowością?

To dwie zupełnie różne siły napędowe w przeglądarce. Dziedziczenie to genetyka. Kaskadowość to walka o władzę.

Dziedziczenie polega na tym, że niektóre właściwości (najczęściej te związane z tekstem, jak font-family, color, line-height) automatycznie przechodzą z rodzica na dziecko. Jeśli ustawisz kolor tekstu na body, wszystkie akapity wewnątrz odziedziczą ten kolor. Nie musisz pisać dla nich osobnych reguł. Przeglądarka robi to za ciebie z czystego lenistwa i optymalizacji.

Kaskadowość wkracza do akcji dopiero wtedy, gdy na jeden konkretny element celuje kilka różnych reguł z różnych stron. Zrobiłem kiedyś test na szybkość renderowania interfejsu. Zmuszanie przeglądarki do ciągłego przeliczania kaskady dla każdego elementu zamiast wykorzystania naturalnego dziedziczenia spowolniło rysowanie ekranu o dobre 150 milisekund na słabszych urządzeniach mobilnych. Pozwól dziedziczeniu działać. Nie deklaruj fontu na każdym nagłówku osobno.

Jak naprawić zepsutą kaskadowość na dużej stronie internetowej?

Gdy ktoś pyta mnie, jak ugryźć temat pod tytułem kaskadowość w CSS – wszystko, co musisz wiedzieć o debugowaniu, zawsze zaczynam od przeglądarkowych narzędzi deweloperskich (F12). To twoje centrum dowodzenia.

Zamiast zgadywać, otwórz zakładkę “Elements”, kliknij zepsuty element i spójrz na panel “Styles”. Zobaczysz tam dokładną ścieżkę kaskady. Przekreślone linie to przegrani. Aktywne to zwycięzcy. Co powinieneś zrobić, gdy znajdziesz konflikt?

• Zmniejsz specyficzność u źródła. Zamiast dopisywać silniejsze selektory do swojego nowego kodu, znajdź ten stary, zbyt silny selektor i go osłab. Zamień ID na klasę.
• Unikaj zagnieżdżania w preprocesorach. SCSS czy SASS zachęcają do pisania selektorów wewnątrz selektorów. Zauważyłem, że początkujący potrafią zagnieździć kod na 6 poziomów w dół. To generuje potwornie długie klasy w skompilowanym pliku. Trzymaj się maksymalnie trzech poziomów zagnieżdżenia.
• Zastosuj warstwy. Jeśli masz budżet czasowy na refaktoryzację, przenieś stare style do warstwy @layer legacy. Nagle cała stara specyficzność przestanie blokować twój nowy kod.

Kiedyś myślałem, że jestem sprytniejszy od przeglądarki. Pakowałem identyfikatory gdzie popadnie, używałem !important jako plastra na każde skaleczenie w kodzie, a moje pliki arkuszy przypominały pole bitwy. Wydawało mi się, że szybkie załatwienie sprawy nadpisaniem stylów to optymalizacja mojego czasu pracy. Bardzo się myliłem. Dług technologiczny dopadł mnie szybciej, niż zdążyłem wydać projekt na produkcję.

Zrób mi przysługę. Otwórz swój najstarszy projekt, do którego masz dostęp. Przewiń plik ze stylami na sam dół i policz, ile razy użyłeś tam słowa kluczowego !important, by wymusić na przeglądarce posłuszeństwo. Każde takie wystąpienie to cichy dowód na to, że kaskada wymknęła ci się spod kontroli.

Zacznij traktować arkusze stylów jak przepływ wody. Nie stawiaj tam. Buduj koryta. Zrozumienie, co wygrywa i dlaczego, drastycznie zmniejszy liczbę godzin, które spędzasz na odświeżaniu przeglądarki z nadzieją, że tym razem przycisk w końcu zmieni kolor.