Priorytet warstw i interakcja z !important

W przypadku zwykłych deklaracji (bez !important) priorytet kaskady jest następujący:

1. Style spoza warstw (najwyższy)
2. Warstwa zadeklarowana jako ostatnia
3. Wcześniejsze warstwy (najniższy)

W przypadku deklaracji !important kolejność priorytetów ulega odwróceniu:

1. !important w stylach spoza warstw (najniższy priorytet w hierarchii !important)
2. !important w pierwszej zadeklarowanej warstwie (najwyższy)
3. !important w późniejszych warstwach (niższy)

To odwrócenie odzwierciedla sposób działania deklaracji !important użytkownika i autora w oryginalnej kaskadzie. Deklaracja !important użytkownika nadpisuje deklarację !important autora, aby chronić ustawienia dostępności — ta sama zasada dotyczy warstw. Wcześniejsze, bardziej fundamentalne warstwy wygrywają w przypadku !important.

Demonstracja priorytetu zwykłych deklaracji i deklaracji important:

Dopuszczalne zastosowania w warstwach:

• Warstwa resetowania i normalizacji: !important, aby uniemożliwić komponentom nadpisywanie niezbędnych resetów
• Narzędzia ułatwień dostępu: display: none !important dla narzędzi ukrywających elementy
• Resetowanie ograniczenia ruchu: animation: none !important

Nigdy nie używaj !important w warstwach komponentów. Niweczy to cel stosowania warstw i prowadzi do trudnych w debugowaniu problemów z priorytetem. Zamiast tego użyj kolejności warstw, aby zagwarantować, że narzędzia pomocnicze wygrają.

!important spoza warstw ma najniższy priorytet w hierarchii !important. Oznacza to, że !important w warstwie resetowania nadpisuje !important spoza warstw — jest to sprzeczne z intuicją.

W obrębie pochodzenia autora warstwy porządkują deklaracje. Jednak deklaracje user-agent !important i user !important nadal znajdują się powyżej wszystkich deklaracji pochodzenia autora (zarówno z !important, jak i bez niego). Pełna kolejność kaskady pozostaje następująca:

1. user-agent !important
2. user !important
3. author !important (w kolejności warstw: wygrywa pierwsza warstwa)
4. author normal (w kolejności warstw: wygrywa ostatnia warstwa)
5. user normal
6. user-agent normal

Aby zweryfikować priorytet warstw w swoim projekcie, celowo zapisz sprzeczne reguły w różnych warstwach i sprawdź w DevTools, która z nich wygrywa. Panel Styles pokazuje, z której warstwy pochodzi zwycięska reguła.

Po zastosowaniu @layer specyficzność staje się mniej istotna dla większości kodu CSS komponentów. Możesz pisać prostsze selektory o mniejszej specyficzności i polegać na kolejności warstw przy ustalaniu priorytetu — znacznie ograniczając konflikty specyficzności.

Warstwy zadeklarowano jako @layer reset, components, utilities. Jedna deklaracja !important znajduje się w warstwie reset, a druga w warstwie utilities. Która z nich wygrywa?

W przypadku zwykłych deklaracji wygrywa późniejsza warstwa. W przypadku !important wygrywa pierwsza warstwa. !important spoza warstw ma najniższy priorytet w hierarchii !important. Używaj !important tylko w warstwach resetowania i ułatwień dostępu. Dzięki warstwom możesz pisać prostsze selektory i pozwolić, aby kolejność warstw decydowała o priorytecie zamiast specyficzności.