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?
- Style i ich priorytet
- Kaskadowość w obrębie dokumentu
- Dziedziczenie stylów
- Ważny !important
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:
- Lokalne style inline
- Wewnętrzny arkusz stylów
- Importowane style do wewnętrznego arkusza CSS
- Zewnętrzny arkusz stylów
- 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:
4 komentarze
Fajnie wytłumaczone. Pomocny artykuł 🙂
dzięki, mam nadzieję, że się przyda 🙂
A czy przypadkiem w Dziedziczeniu stylów, w tym drugim przykładzie kolory nie powinny być na odwrót? „Treść akapitu oraz” – niebieskie, a reszta czerwona?
Oczywiście, że tak, masz rację 🙂 dzięki, już poprawione