Kurs HTML

Wprowadzenie: Kto ma ostatnie słowo?

W poprzedniej lekcji dowiedzieliśmy się, że kaskada CSS bierze pod uwagę źródło stylów, ważność (!important) i kolejność reguł. Jednak gdy wiele reguł z tego samego źródła i o tej samej ważności dotyczy tej samej właściwości elementu, kluczową rolę w rozstrzyganiu konfliktu odgrywa **specyficzność selektora**.

Specyficzność to "waga" lub "moc" danego selektora CSS. Im bardziej specyficzny (precyzyjny) jest selektor, tym większy ma priorytet w kaskadzie. Przeglądarka oblicza specyficzność dla każdego selektora pasującego do elementu i stosuje styl z reguły o najwyższej specyficzności.

Obliczanie specyficzności: Notacja (A, B, C, D)

Specyficzność jest zazwyczaj reprezentowana jako czteroczęściowa wartość (A, B, C, D), gdzie każda część liczy wystąpienia określonego typu selektora. Porównanie odbywa się od lewej do prawej (A jest najważniejsze).

• A (Style inline): Liczba stylów inline zastosowanych do elementu. Styl inline (style="...") ma najwyższą specyficzność (1, 0, 0, 0).
• B (Selektory ID): Liczba selektorów ID (np. #mojeID) w całym selektorze.
• C (Selektory klas, atrybutów i pseudoklas): Liczba selektorów klas (np. .mojaKlasa), selektorów atrybutów (np. [type="text"]) i pseudoklas (np. :hover, :nth-child()) w całym selektorze.
• D (Selektory typu i pseudoelementy): Liczba selektorów typu (np. div, p) i pseudoelementów (np. ::before, ::first-line) w całym selektorze.

Ważne uwagi:

• Selektor uniwersalny (*) i kombinatory (>, +, ~, spacja) **nie wpływają** na specyficzność.
• Pseudoklasa :not() sama w sobie nie liczy się do specyficzności, ale liczą się selektory **wewnątrz** niej.
• Deklaracje z !important **ignorują** specyficzność (ale podlegają własnym regułom priorytetu źródła, jak omówiono w poprzedniej lekcji).

Przykłady obliczania specyficzności:

Rozwiązywanie konfliktów

Gdy przeglądarka porównuje specyficzność dwóch reguł dotyczących tej samej właściwości:

1. Porównuje wartość A. Jeśli jedna reguła ma A=1, a druga A=0, wygrywa ta pierwsza (styl inline).
2. Jeśli wartości A są równe (zazwyczaj obie 0), porównuje wartość B. Reguła z większą liczbą selektorów ID wygrywa.
3. Jeśli wartości B są równe, porównuje wartość C. Reguła z większą liczbą klas, atrybutów i pseudoklas wygrywa.
4. Jeśli wartości C są równe, porównuje wartość D. Reguła z większą liczbą typów i pseudoelementów wygrywa.
5. Jeśli wartości A, B, C i D są **identyczne**, to ostatecznie decyduje **kolejność w kodzie CSS** – wygrywa reguła zdefiniowana później.

Przykład konfliktu:

<button class="przycisk anuluj" id="przycisk-reset">Resetuj</button>

/* Reguła 1 */
.przycisk {
  background-color: blue; /* Specyficzność: (0,0,1,0) */
}

/* Reguła 2 */
button.anuluj {
  background-color: gray; /* Specyficzność: (0,0,1,1) */
}

/* Reguła 3 */
#przycisk-reset {
  background-color: red; /* Specyficzność: (0,1,0,0) */
}

W tym przypadku, dla właściwości background-color przycisku:

• Reguła 3 (#przycisk-reset) ma najwyższą specyficzność (0,1,0,0) dzięki selektorowi ID.
• Dlatego przycisk będzie miał **czerwone (red)** tło, niezależnie od kolejności reguł w CSS.

Dobre praktyki dotyczące specyficzności

• Utrzymuj niską specyficzność: Staraj się używać jak najmniej specyficznych selektorów, które nadal precyzyjnie wybierają docelowe elementy. Preferuj klasy nad ID do stylizowania.
• Unikaj selektorów ID do stylizowania: Ze względu na ich wysoką specyficzność, utrudniają nadpisywanie stylów.
• Unikaj !important: Używaj !important tylko w ostateczności, np. do nadpisania stylów inline lub stylów z zewnętrznych bibliotek, których nie możesz zmodyfikować. Nadużywanie !important prowadzi do trudnego w zarządzaniu kodu.
• Polegaj na klasach: Klasy oferują dobry balans między specyficznością a możliwością reużycia. Buduj komponenty za pomocą klas.
• Zrozumienie jest kluczem: Dokładne zrozumienie, jak obliczana jest specyficzność, pozwala unikać niespodzianek i pisać bardziej przewidywalny CSS.