Kaskadowość w CSS

Olaboga! Ile razy zaskoczył Ciebie ten niepozorny, błahy, często lekceważony CSS? Ile piątkowych wieczorów zniszczył? Ile łez wycisnął!? Policz na sumieniu wszystkie swoje !importanty, a teraz potulnie usiądź i przeczytaj mój artykuł. Mam dla Ciebie coś, co odmieni Twoje życie.

Definicja

Skrót CSS pochodzi od Cascading Style Sheets, czyli dosłownie Kaskadowych Arkuszy Stylów.
Style Sheets jest pojęciem oczywistym, jednak słowo Cascading brzmi co najmniej magicznie. Sprawdźmy je dokładniej u źródła, czyli w specyfikacji:

The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value.

Biorąc pod uwagę powyższą definicję, kaskada w CSS to algorytm, dzięki któremu interpreter (przeglądarka internetowa) decyduje, które style przypisać konkretnemu elementowi.

Inna definicja, równie poprawna to: proces łączenia kilku arkuszy stylów oraz rozwiązywania konfliktów pomiędzy nimi.

Wiesz z pewnością, że wygląd strony internetowej jest wynikową co najmniej kilku arkuszy stylów. Poszczególne reguły CSS często się wykluczają. Możemy przedstawić to obrazowo jako wielką bitwę, w której każda z reguł próbuje po swojemu ostylować elementy HTML. Kaskada jest w tej wizji sędzią decydującym o tym, które style wygrywają.

Przechodzimy teraz do sedna – w jaki sposób kaskada decyduje o ważności reguł CSS?

Omówmy sobie ten magiczny algorytm przedstawiając kolejne 4 warstwy kaskady w CSS.

Warstwy kaskady w CSS

1. Waga (importance)

Na początku kaskada sprawdza typ konkurujących ze sobą stylów.

Istnieją 4 podstawowe typy stylów (przedstawione w kolejności od najważniejszego do najmniej istotnego):

1. przejścia, czyli transition
   style należące do CSS Transition są traktowane priorytetowo
2. !important
   akty desperacji programistów, czyli style z niesławną deklaracją !important
3. animacje, czyli animation
   style należące do CSS Animations
4. cała reszta

Jeśli walczące ze sobą style są tego samego typu, kaskada przeskakuje na kolejny poziom.

2. Pochodzenie (origin)

Druga runda walki. Kaskada sprawdza teraz miejsce, w którym zostały zdefiniowane wykluczające się reguły.

Istnieją 3 miejsca, w których można zdefiniować style (uporządkowane w kolejności od najważniejszego do najmniej istotnego):

1. strona internetowa
   poziom, na którym działają programiści
2. użytkownik
   nadpisuje style strony np. w celu zwiększenia jej dostępności
3. przeglądarka
   każda przeglądarka posiada własny zestaw domyślnych stylów (często nadpisywany przez popularne CSS resets)

Uwaga, wyjątek! Powyższa hierarchia jest dokładnie ODWROTNA dla stylów z dopiskiem !important:
1. przeglądarka
2. użytkownik
3. strona internetowa
I tak oto np. styl przeglądarki z dopiskiem !important jest ważniejszy niż styl aplikacji z dopiskiem !important.

Jeśli walczące ze sobą reguły są tego samego typu oraz pochodzą z tego samego miejsca, kaskada przeskakuje na kolejny poziom.

3. Specyficzność (specificity)

Trzeci poziom kaskady to sprawdzenie specyficzności reguł CSS.

Dobry, popularny sposób określania specyficzności znajdziesz tutaj, a w jego zapamiętaniu z pewnością pomoże Ci moja darmowa ściąga do pobrania.

Powtórzmy sobie jednak podstawowe reguły specyficzności. Mamy 4 typy selektorów (w kolejności od najważniejszego do najmniej istotnego):

1. inline
   style zadeklarowane w atrybucie HTML style są najbardziej specificzne (najważniejsze)
2. id
   style CSS przypisane do elementu za pomocą id (np. #my-id)
3. klasa / pseudoklasa / atrybut
   style CSS przypisane do elementu za pomocą
   klasy (np. .my-class)
   pseudoklasy (np. :hover)
   atrybutu (np. [checked])
4. tag / pseudoelement
   style CSS przypisane do elementu za pomocą
   nazwy, czyli tagu (np. button)
   pseudoelementu (np. ::before)

Wiem, że specyficzność jest jak rzep na psim ogonie. Wielu ludzi próbuje wyeliminować problem złożoności jej działania poprzez utrzymywanie kodu CSS na możliwie najniższej specyficzności, jednocześnie zwiększając jego elastyczność. Inni idą w metodologie typu BEM, OOCSS, SMACSS, ITCSS…

I tutaj najczęściej kończy się historia walki reguł na drodze do ostylowania elementu. Jednak niektóre wykluczające się reguły są tego samego typu, pochodzą z tego samego źródła oraz mają identyczną specyficzność. W takim przypadku kaskada przechodzi na czwarty, ostatni poziom.

4. Pozycja (position)

Kolejność. To jest właśnie poziom kaskady, który badałam w moim ostatnim artykule.

Reguły zdefiniowane niżej w arkuszu CSS (lub też później w atrybucie style) – wygrywają.

Ten poziom kaskady często jest głównym powodem, dla którego zewnętrzne style (frameworka lub wspomniany wcześniej CSS reset) ładujemy przed naszymi stylami.

Kaskada, a dziedziczenie

Pojęcie kaskadowości w CSS jest często mylnie kojarzone z dziedziczeniem w CSS.

Dziedziczenie opisuje sytuację, w której pewne reguły CSS są domyślnie przypisywane wszystkim strukturalnym dzieciom stylowanego elementu. Własności, które są dziedziczone to m.in font-family oraz color.

Dziedziczone własności mają najniższy priorytet ze wszystkich metod stylowania. Każda reguła przypisana ściśle do określonego elementu będzie nadpisywać jego dziedziczone style (nawet jeśli posiadają one atrybut !important).

Ufff, koniec.

Mam nadzieję, że choć trochę rozjaśniłam Tobie temat kaskadowości w CSS. Skąd się bierze i na czym mniej więcej polega. Koniec z nieprzespanymi nocami z powodu CSSa!