Kaskada: źródło i kolejność

Kaskada to algorytm CSS określający, która deklaracja stylu zwycięży, gdy wiele reguł dotyczy tej samej właściwości tego samego elementu. Uwzględnia pochodzenie, ważność, specyficzność oraz kolejność w kodzie źródłowym.

Deklaracje CSS pochodzą z trzech źródeł, uporządkowanych według priorytetu:

1. Arkusz stylów agenta użytkownika — domyślne ustawienia przeglądarki
2. Arkusz stylów użytkownika — niestandardowe style ustawione przez użytkowników (dostępność)
3. Arkusz stylów autora — pliki CSS aplikacji

W przypadku zwykłych deklaracji (bez !important) style autora nadpisują style użytkownika, a te z kolei nadpisują style agenta użytkownika. Dlatego własny CSS wygrywa z domyślnymi ustawieniami przeglądarki.

Dodanie !important odwraca kolejność pochodzenia dla danej deklaracji:

1. !important agenta użytkownika
2. !important użytkownika — najwyższy priorytet (dostępność)
3. !important autora

Dlatego nadpisania użytkownika dotyczące dostępności (np. wymuszone kolory) nie mogą zostać pokonane przez CSS autora.

Gdy konkurują ze sobą dwie deklaracje z tego samego źródła, o zwycięstwie decyduje specyficzność. Wyższa specyficzność wygrywa — właśnie o niej deweloperzy myślą w pierwszej kolejności podczas debugowania CSS.

Gdy dwie reguły mają identyczną specyficzność, wygrywa ta, która występuje później w arkuszu stylów. To zasada „kolejności w kodzie źródłowym”. Dlatego znaczenie ma kolejność instrukcji @import i deklaracji @keyframe.

Warstwy kaskady CSS (@layer) wprowadzają nowy etap kaskady między pochodzeniem a specyficznością. Kolejność warstw określa priorytet, a deklaracja w późniejszej warstwie wygrywa z deklaracją we wcześniejszej warstwie niezależnie od ich specyficzności.

Pełna kolejność priorytetów (od najwyższego do najniższego):

1. Pochodzenie + ważność (!important użytkownika, !important autora)
2. Wartości animacji
3. Warstwy CSS (wygrywają późniejsze warstwy)
4. Specyficzność
5. Kolejność w kodzie źródłowym
6. Wartości przejść

Dziedziczenie różni się od kaskady. Wartości odziedziczone pochodzą z obliczonego stylu elementu rodzica. Przegrywają z każdą wartością zastosowaną bezpośrednio, nawet jeśli pochodzi ona z reguły o niskiej specyficzności.

Umieszczaj bardziej specyficzne style (warianty) po stylach bazowych w arkuszu stylów. Dlatego pliki komponentów należy importować po plikach resetu i plikach bazowych.

W panelu Styles narzędzia DevTools reguły są wymienione od najwyższego do najniższego priorytetu. Przekreślone reguły przegrały w kaskadzie. Najedź kursorem na regułę, aby zobaczyć jej plik źródłowy i numer wiersza potrzebne do debugowania.

Dwie reguły dotyczą tej samej właściwości i mają identyczną specyficzność. Która z nich wygrywa?

Kaskada rozstrzyga konflikty stylów, wykorzystując pochodzenie (autor > użytkownik > przeglądarka), następnie ważność (!important odwraca kolejność), kolejność @layer, specyficzność oraz kolejność w kodzie źródłowym. Zrozumienie kaskady pozwala dokładnie przewidzieć, która reguła wygra w dowolnym konflikcie — bez zgadywania.