Laagprioriteit en interactie met !important

Voor normale (niet-!important) declaraties is de cascadeprioriteit:

1. Stijlen zonder laag (hoogste)
2. De laatst gedeclareerde laag
3. Eerdere lagen (laagste)

Voor declaraties met !important keert de prioriteitsvolgorde om:

1. !important in stijlen zonder laag (laagste binnen de laag met !important)
2. !important in de eerst gedeclareerde laag (hoogste)
3. !important in latere lagen (lager)

De omkering weerspiegelt hoe !important-declaraties van gebruikers en auteurs in de oorspronkelijke cascade werken. !important-declaraties van gebruikers overschrijven !important-declaraties van auteurs om toegankelijkheidsvoorkeuren te beschermen — dezelfde logica geldt ook voor lagen. Eerdere (meer fundamentele) lagen winnen bij !important.

Demonstratie van normale prioriteit versus de prioriteit van !important:

Aanvaardbare toepassingen binnen lagen:

• Reset-/normalisatielaag: !important om te voorkomen dat een component essentiële resets overschrijft
• Toegankelijkheidsvoorzieningen: display: none !important voor verbergingshulpmiddelen
• Reset voor minder beweging: animation: none !important

Gebruik nooit !important in componentlagen. Daarmee ondermijn je het doel van lagen en creëer je prioriteitsproblemen die moeilijk op te sporen zijn. Gebruik in plaats daarvan de laagvolgorde om ervoor te zorgen dat hulpmiddelen winnen.

!important zonder laag heeft de laagste prioriteit binnen de laag met !important. Dat betekent dat de !important-declaratie van een resetlaag een !important-declaratie zonder laag overschrijft — een niet-intuïtief resultaat.

Binnen de herkomst van de auteur sorteren lagen declaraties. Maar !important-declaraties van de user-agent en de gebruiker staan nog steeds boven alle declaraties van de auteur (met of zonder !important). De volledige cascadevolgorde blijft:

1. !important van de user-agent
2. !important van de gebruiker
3. !important van de auteur (in laagvolgorde: de eerste laag wint)
4. Normale declaraties van de auteur (in laagvolgorde: de laatste laag wint)
5. Normale declaraties van de gebruiker
6. Normale declaraties van de user-agent

Om de laagprioriteit in je project te controleren, schrijf je bewust conflicterende regels in verschillende lagen en controleer je welke wint in DevTools. Het deelvenster Stijlen toont uit welke laag de winnende regel afkomstig is.

Na de overstap naar @layer wordt specificiteit minder belangrijk voor de meeste CSS van componenten. Je kunt eenvoudigere selectoren met een lagere specificiteit schrijven en op de laagvolgorde vertrouwen voor de prioriteit — waardoor specificiteitsstrijd sterk afneemt.

Voor normale declaraties wint de latere laag. Bij !important wint de eerste laag. !important zonder laag heeft de laagste prioriteit binnen de laag met !important. Gebruik !important alleen in reset- en toegankelijkheidslagen. Met lagen kun je eenvoudigere selectoren schrijven en de laagvolgorde de prioriteit laten bepalen in plaats van specificiteit.