Kaskadowość

Kaskadowość, czyli "cascading", to fundamentalna cecha języka CSS (Cascading Style Sheets), która odgrywa kluczową rolę w określaniu, które style mają zastosowanie do elementów na stronie internetowej. Kaskadowość definiuje, jak różne style i reguły są łączone, rozstrzyga konflikty między nimi i ustala, które style ostatecznie zostaną zastosowane do elementów.

Kaskadowość w CSS opiera się na trzech głównych zasadach:

1. Źródło - Style mogą pochodzić z różnych źródeł, takich jak style inline (w linii), arkusze stylów wewnętrzne, zewnętrzne arkusze stylów oraz style użytkownika i przeglądarki. Kaskadowość określa hierarchię tych źródeł i decyduje, które style będą miały pierwszeństwo.

2. Specyficzność - Każda reguła stylu ma określoną specyficzność, która jest oparta na selektorach użytych w regule. Specyficzność pomaga rozstrzygnąć konflikty, gdy różne reguły próbują zastosować style do tego samego elementu. Reguła o wyższej specyficzności ma pierwszeństwo przed regułą o niższej specyficzności.

3. Kolejność - Kiedy dwie lub więcej reguł ma taką samą specyficzność, kaskadowość uwzględnia kolejność, w jakiej reguły są zdefiniowane. Styl umieszczony później w kodzie ma pierwszeństwo przed stylem wcześniejszym.

Dzięki zasadom kaskadowości w CSS możemy precyzyjnie kontrolować, jakie style zostaną zastosowane do poszczególnych elementów na stronie. Daje nam to elastyczność i możliwość tworzenia spójnych i atrakcyjnych wizualnie projektów stron internetowych.

Na dany element mogą działać style pochodzące z różnych miejsc:

• domyślne style przeglądarki - przeglądarka narzuca swoje arkusze stylów. Styl użytkownika modyfikuje domyślny styl przeglądarki.

• zewnętrzny arkusz stylów

<head>
  <link rel="stylesheet" href="styles.css">
</head>

• wewnętrzny arkusz stylów w HTML

<head>
  <style>
    .my-paragraph {
      color: blue;
    }
  </style>
</head>

• style inline w HTML

<p style="color: red;">Treść akapitu</p>

Możemy więc ostylować jeden element z różnych miejsc. Gdy kilka źródeł ustawia tę samą właściwość, przeglądarka rozstrzyga konflikt tak:

1. Najsłabsze są domyślne style przeglądarki.
2. Zewnętrzny arkusz (<link>) i wewnętrzny (<style>) mają tę samą siłę: wygrywa reguła o wyższej specyficzności, a przy równej ta, która stoi w dokumencie później - jeśli <style> jest pod <link>, nadpisze reguły z pliku.
3. Styl inline (atrybut style) wygrywa z każdym zwykłym selektorem.
4. Deklaracja z !important wygrywa nawet ze stylem inline - to ostateczność (antywzorzec).

Oprócz stylów autora strony istnieją domyślne style przeglądarki (ang. user agent) i style użytkownika, np. jego ustawienia czytelności. Zwykłe deklaracje rozstrzygają się w kolejności: przeglądarka < użytkownik < autor. !important odwraca tę kolejność: !important autora przegrywa z !important użytkownika, żeby użytkownik zawsze mógł wymusić np. większą czcionkę.

Dyrektywę !important dopisujesz na końcu wartości w deklaracji. Podnosi ona tę jedną deklarację ponad wszystkie zwykłe reguły, niezależnie od specyficzności selektora:

p {
  background-color: red !important;
}

Ten przykład da wszystkim akapitom czerwone tło, nawet jeśli bardziej specyficzna reguła albo styl inline ustawia im inny kolor tła. Używaj tego rzadko - to antywzorzec.

A co jeśli używamy tego samego miejsca, ale innego selektora?

• Grupa pierwsza - priorytet najważniejszy - selektor id (#element)
• Grupa druga - priorytet średni - selektor klasy, pseudoklasy, atrybutu (.element)
• Grupa trzecia - priorytet najmniej ważny - selektor elementu, pseudoelementu (element)

Specyficzność porównuje się grupami, od najważniejszej: najpierw liczba identyfikatorów, potem klas, na końcu znaczników. Dlatego jeden selektor ID wygrywa z dowolną liczbą klas, a .menu .link (dwie klasy) wygrywa z .link (jedna klasa).

Selektory *, ,, >, +, ~ nie są brane pod uwagę podczas ustalania reguł, który styl jest ważniejszy.