Specyficzność CSS — dlaczego styl nie działa

Typowy problem

Dopisujesz regułę .przycisk { color: red; }, a kolor się nie zmienia. Narzędzia deweloperskie pokazują, że reguła jest przekreślona. Najczęstszą przyczyną jest specyficzność: inna reguła ma silniejszy selektor i wygrywa niezależnie od kolejności w pliku.

Kolejność decydowania

1. Pochodzenie i ważność: deklaracje z !important wygrywają ze zwykłymi.
2. Warstwy kaskady (@layer), jeśli są używane.
3. Specyficzność selektora.
4. Kolejność w kodzie: przy remisie wygrywa reguła zapisana później.

Jak liczyć specyficzność

Zapisujemy ją jako trzy liczby (a, b, c):

• a – identyfikatory, np. #menu,
• b – klasy, atrybuty i pseudoklasy, np. .link, [type="text"], :hover,
• c – elementy i pseudoelementy, np. a, li, ::before.

Porównujemy od lewej. #menu a to (1, 0, 1) i wygrywa z .nav .lista .link a, czyli (0, 3, 1). Liczby nie przechodzą jedna w drugą, więc nawet dwadzieścia klas nie pokona jednego identyfikatora. Selektory sprawdzisz w kalkulatorze specyficzności.

Pseudoklasy z argumentami

:is(), :not() i :has() przyjmują specyficzność najsilniejszego argumentu. :where() ma zawsze zero, co czyni ją dobrym narzędziem do stylów bazowych, które łatwo nadpisać. Selektor uniwersalny * i kombinatory (spacja, >, +, ~) nie zmieniają wyniku.

Style w atrybucie i !important

Styl wpisany w style="" pokonuje każdy selektor z arkusza. !important przeskakuje nad całą tą skalą. Używanie go do „naprawiania” problemów prowadzi do wyścigu, w którym kolejne reguły też dostają !important i arkusz staje się trudny w utrzymaniu.

Jak utrzymać porządek

• Stylizuj głównie pojedynczymi klasami, np. według konwencji BEM.
• Nie używaj identyfikatorów w selektorach CSS. Zostaw je dla kotwic i JavaScriptu.
• Unikaj długich łańcuchów, takich jak header nav ul li a. Są kruche i mocne.
• Reset i style bazowe zamknij w :where() lub w warstwie @layer.

Układ i wydajność

Gdy style działają, warto zadbać o rozmiar pliku. O tym pisze poradnik minifikacja CSS, a kod skróci minifikator CSS. Układ elementów wyjaśniają poradniki Flexbox i CSS Grid, a kod wygeneruje generator Flexbox.