O tym co to znaczy “kaskadowy” w praktyce, czym jest dziedziczenie i po co komu “!important”

Zasady określające zastosowanie stylów pochodzących z różnych źródeł mogą w pierwszej chwili wydawać się niejasne i zawikłane. Należy jednak przyswoić kilka podstawowych informacji, aby mieć wstępne pojęcie “dlaczego ten element wyświetla się tak, a nie inaczej”. Tę kwestię potrafi utrudnić używanie słowa kluczowego “!important”, jednak zanim do niego przejedziemy, przyjrzyjmy się kaskadowości oraz dziedziczeniu stylów.

Spis treści

Czym jest kaskadowość CSS?

Kaskadowość arkuszy stylów to nic innego jak zasada, która określa jaki konkretnie styl ma zostać użyty podczas wyświetlania konkretnego elementu. A jest w czym wybierać! Style, jak zaznaczałam w poprzednim wpisie, mogą być zdefiniowane w kilku różnych miejscach, choćby “inline” dla każdego elementu, np.

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

lub np. w wewnętrznym arkuszu stylów, czyli w sekcji <head> dokumentu HTML:

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

Co jednak się stanie, kiedy będziemy mieć do czynienia z poniższym kodem? Rozważmy:

<head>
  (...)
  <style>
    .my-paragraph {
      color: red;
    }
  </style>
</head>
<body>
  <p class="my-paragraph" style="color: blue;">Treść akapitu</p>
</body>

Jaki efekt otrzymamy po otwarciu pliku w przeglądarce? Tekst “Treść akapitu” będzie czerwony, ponieważ taki kolor wynika z reguły dla klasy .my-paragraph, czy też niebieski, ponieważ styl elementu tak definiuje właściwość color? Poprawna odpowiedź to kolor niebieski. Dlaczego? Właśnie z powodu zasady kaskadowości.

Style i ich priorytet

Kaskadowość narzuca taką oto kolejność stylów, w kolejności od najważniejszego do najmniej ważnego:

  1. Lokalne style inline
  2. Wewnętrzny arkusz stylów
  3. Importowane style do wewnętrznego arkusza CSS
  4. Zewnętrzny arkusz stylów
  5. Importowane style do zewnętrznego arkusza CSS

Oznacza to, że w przypadku kiedy zdecydujemy się np. w wewnętrznym arkuszu stylów modyfikować ten sam element, który modyfikujemy w arkuszu zewnętrznym, to nie dojdzie do żadnych konfliktów ani błędów: stylowanie przebiega zgodnie z priorytetem i ważniejsze źródła mają pierwszeństwo nad stylami mniej ważnymi.

Kaskadowość w obrębie dokumentu

Wiadomo już w jaki sposób określany jest priorytet źródeł stylów. Można jednak zadać pytanie: co w przypadku, kiedy w obrębie jednego źródła zdecyduję się nadpisać styl elementu? Dla przykładu:

<head>
  (...)
  <style>
    .my-paragraph {
      color: red;
    }
    .my-paragraph {
      color: yellow;
    }
  </style>
</head>
<body>
  <p class="my-paragraph">Treść akapitu</p>
</body>

W tej sytuacji tekst “Treść akapitu” będzie miał kolor żółty, ponieważ w przypadku kiedy w dokumencie znajduje się kilka reguł modyfikujących tę samą właściwość, to najwyższy priorytet ma ostatnia deklaracja (wpływ na priorytet ma również priorytet selektorów, jednak ten temat zostanie omówiony w osobnym wpisie).

Przy tej okazji warto wspomnieć, że w dokumencie HTML dołączenie zewnętrznego arkusza stylów powinno znajdować się wcześniej niż wewnętrzny arkusz stylów, tj.:

<head>
  (...)
  <link rel="stylesheet" href="style.css">
  <style>
    .my-paragraph {
      color: red;
    }
  </style>
</head>

Dziedziczenie stylów

Przyjrzyjmy się poniższemu elementowi:

<p style="color: red;">Treść akapitu oraz <strong>ważna treść!</strong></p>

Wyświetlenie w przeglądarce powyższego elementu to w efekcie:

Dlaczego element <strong> również jest czerwony? Wynika to ze zjawiska dziedziczenia stylów, które oznacza że element potomny – o ile nie nadamy mu stylów nadpisujących wybrane właściwości – dziedziczy konkretne dyrektywy po swoich przodkach.

Dla porównania, kod:

<head>
  (...)
  <style>
    .my-class {
      color: red;
    }
  </style>
</head>
<body>
  <p style="color: blue;">Treść akapitu oraz 
    <span class="my-class">element inline.</span>
  </p>
</body>

to w efekcie:

Ważny !important

Zasady kaskadowości oraz dziedziczenia można nadpisać przy użyciu słowa kluczowego !important. To polecenie, zastosowane przy wartości w deklaracji powoduje, że dana deklaracja ma pierwszeństwo przed innymi, niezależnie od priorytetu wynikającego z kaskadowości. Dla przykładu:

<head>
  (...)
  <style>
    .my-paragraph {
      color: red !important;
    }
  </style>
</head>
<body>
  <p class="my-paragraph" style="color: blue;">Treść akapitu</p>
</body>

w efekcie spowoduje wyświetlenie tekstu w kolorze czerwonym, właśnie z powodu zastosowania polecenia !important.

Choć użycie !important może wydawać się kuszące, dla własnego dobra staram się ograniczyć jego zastosowanie do niezbędnego minimum. Zagęszczenie importanów w kodzie CSS, szczególnie w większym projekcie, gdzie style pochodzą z wielu źródeł, sprawia że szukanie reguły odpowiedzialnej za konkretny styl potrafi być przysłowiową orką na ugorze. Debugowanie takiego kodu wymownie podsumowuje poniższy gif:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *