Pytanie 1
Jaki kolor będą miały teksty akapitów utworzone na podstawie przedstawionego arkusza stylów?
<style>
p{color: yellow;}
p{color: black;}
p{color: red;}
</style>
A. Czerwony.
B. Czarny.
C. Żółty.
D. Zielony.
To pytanie porusza dość podchwytliwy aspekt arkuszy stylów CSS, mianowicie mechanizm nadpisywania reguł poprzez kolejność ich deklaracji. Wiele osób intuicyjnie zakłada, że wystarczy spojrzeć na pierwszą lub środkową regułę, nie zwracając uwagi na fakt, że najważniejsza jest ta ostatnia, jeśli wszystkie mają identyczną specyficzność. Założenie, że kolor tekstu akapitu będzie żółty lub czarny, wynika najczęściej z nieznajomości tej właśnie zasady „last rule wins” w CSS albo mylenia z innymi mechanizmami specyficzności, gdzie selektor bardziej szczegółowy przeważa nad ogólnym. Jednak tutaj selektory są dokładnie takie same — zwykłe „p”. To oznacza, że każda kolejna reguła nadpisuje poprzednią dla tego samego selektora i właściwości. Kolor zielony w ogóle nie występował wśród deklaracji, więc jego wybór świadczy raczej o nieuwadze lub przypadkowym błędzie. Często początkujący deweloperzy myślą, że pierwsza reguła zdefiniowana w arkuszu wyznaczy bazowy wygląd, a kolejne tylko szczegóły, jednak w praktyce działa to odwrotnie, jeśli selektory są identyczne. Ten mechanizm jest też powodem, dla którego w dużych projektach warto planować strukturę CSS i unikać powtarzania tych samych reguł. Kiedy style się rozrastają, łatwo przeoczyć, że gdzieś na końcu pliku lub w importowanym stylu została nadpisana wcześniejsza deklaracja, przez co efekt końcowy jest inny niż zamierzony. Warto zapamiętać, że jeśli nie stosujesz dodatkowej specyficzności czy !important, to zawsze ostatnia pasująca reguła dla danego selektora decyduje o ostatecznym stylu. Z mojego doświadczenia wynika, że dopiero praktyka pozwala dobrze zrozumieć, jak ta zasada wpływa na wygląd strony i jak unikać chaotycznego nadpisywania stylów.
