Co to jest specyficzność CSS i dlaczego ma znaczenie?
Kiedy dwie reguły CSS dotyczą tego samego elementu i tej samej właściwości (np. `color`), przeglądarka musi zdecydować którą zastosować. To kaskada. Decyduje: pochodzenie (czyje zasady - autora czy użytkownika), !important, specyficzność selektora i kolejność w kodzie.
Specyficzność to liczbowa waga selektora. Liczona w czworze (a, b, c, d): a = style inline, b = liczba ID, c = liczba klas/atrybutów/pseudo-klas, d = liczba elementów/pseudo-elementów. Selektor `#header .card a` ma specyficzność (0, 1, 1, 1). Selektor `.menu .item.active` ma (0, 0, 3, 0). Pierwszy wygra bo ma ID.
Tu wklejasz selektor i widzisz konkretną liczbę plus rozbicie co dało ile. Tryb porównania pokazuje który selektor wygra dla tej samej właściwości. Tryb bloku CSS analizuje całą regułę i pokazuje konflikty.
Jak korzystać
- Wybierz tryb: Pojedynczy selektor (debug konkretnego), Porównaj (kilka selektorów obok siebie), Blok CSS (kompletna reguła).
- Wklej selektor lub kod CSS w pole.
- Tool pokazuje specyficzność jako (a,b,c,d) plus rozbicie - co konkretnie dało ile punktów.
- Tryb porównania podświetla zwycięzcę - selektor z najwyższą specyficznością wygrywa konflikt.
- Kliknij "Kopiuj" żeby skopiować wynik (np. do code review albo dokumentacji).
Do czego się przydaje
Realne sytuacje gdzie liczy się specyficzność:
- Debug "dlaczego styl się nie aplikuje". Twoja reguła `.button { color: red }` nie działa - prawdopodobnie inna reguła ma wyższą specyficzność. Wklej obie, zobacz która wygra.
- Refaktoryzacja CSS. Przechodzisz ze starego CSS na BEM/utility-first - musisz zrozumieć aktualne wagi selektorów.
- Migracja do Tailwinda. Tailwind używa głównie klas (specyficzność 0,0,1,0) - jeśli twoja stara reguła to `#sidebar .menu a:hover` (0,1,2,1) to Tailwind przegra. Trzeba użyć `!important` albo zwiększyć specyficzność klasy Tailwinda.
- Code review. Komentarz "ten selektor ma za wysoką specyficzność, trudno będzie nadpisać" - tool daje liczby do dyskusji.
- Nauka selektorów L4 - `:where()` ma specyficzność zero, `:is()` bierze najwyższą z argumentów, `:has()` też. Praktyka pomaga zapamiętać.
- CSS-in-JS / Styled Components. Klasy generowane są niskiej specyficzności (`.css-abc123`) - łatwo nadpisywane przez `#id` albo `!important`. Trzeba o tym wiedzieć.
- Print stylesheets. Reguły w `@media print` mogą mieć tę samą specyficzność co normalne - kolejność w kodzie decyduje.
Aby zbudować gradient CSS, użyj generator gradientów. Dla box-shadow, generator box-shadow.