@layer-declaratie en volgorde
Declareer benoemde cascade-lagen en bepaal hun prioriteitsvolgorde met @layer-statements.
@layer-declaratie en volgorde is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is @layer?
CSScascade-lagen (@layer) bieden een mechanisme om de prioriteit van CSS-regels in de cascade expliciet te beheren, onafhankelijk van specificiteit. Lagen met een lagere prioriteit verliezen zelfs wanneer ze selectors met een hogere specificiteit hebben.
Waarom @layer belangrijk is
Zonder lagen concurreert elke CSS-regel op basis van specificiteit en bronvolgorde. Dat leidt tot specificiteitsstrijd wanneer reset-, component- en utility-stijlen allemaal om prioriteit concurreren. Lagen geven elke groep een vaste, voorspelbare prioriteit.
Lagen declareren
Declareer lagen vooraf in één instructie. De volgorde van declaratie bepaalt de prioriteit: latere lagen winnen van eerdere lagen.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Positie van de laagsdeclaratie
De declaratie van @layer hoort bovenaan je stylesheet te staan (of in je belangrijkste importbestand). Na de declaratie kun je in willekeurige volgorde stijlen aan lagen toevoegen: de prioriteit wordt bepaald door de declaratievolgorde, niet door de plaats waar stijlen worden toegevoegd.
Waarom bronvolgorde niet belangrijk is voor lagen
Omdat de prioriteit van een laag tijdens de declaratie wordt bepaald, kun je overal stijlen aan een laag toevoegen, zelfs voordat de laag is gedeclareerd, door er vooraf naar te verwijzen. De gedeclareerde volgorde is bepalend.
Prioriteitsregel voor lagen
Een declaratie in een latere laag wint altijd van een declaratie in een eerdere laag, ongeacht de specificiteit:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Stijlen zonder laag
Stijlen die buiten elke laag zijn geplaatst, worden stijlen zonder laag genoemd. Ze hebben de hoogste prioriteit, zelfs hoger dan de laatst gedeclareerde laag. Gebruik dit voor noodoverschrijvingen die altijd moeten winnen.
De prioriteitsvolgorde
Volledige prioriteitsvolgorde (van hoog naar laag voor auteursstijlen):
- Stijlen zonder laag (buiten elke @layer)
- De laatst gedeclareerde laag (bijvoorbeeld utilities)
- De op één na laatst gedeclareerde laag (bijvoorbeeld componenten)
- Eerdere lagen (basis, reset)
Omkering van !important in lagen
!important in lagen is lastig: het keert de volgorde van lagen voor die declaratie om. !important in de vroegste laag wint van !important in latere lagen. Dit komt overeen met het oorspronkelijke cascadegedrag voor gebruikers- en auteursstijlen.
Geneste lagen
Lagen kunnen met puntnotatie worden genest:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Voorbeeld van een praktische opzet
Een realistische laagsopzet voor een project:
<p>A realistic project layer order — see the CSS panel.</p>Snelle controle
Lagen zijn gedeclareerd als: @layer base, components, utilities. De stijlen van welke laag winnen bij een conflict?
Samenvatting
@layer stelt expliciet geordende cascade-lagen in. Declareer laagnamen in volgorde van prioriteit, met de laagste prioriteit eerst. Latere lagen winnen altijd van eerdere lagen, onafhankelijk van specificiteit. Stijlen zonder laag hebben de hoogste prioriteit. !important keert de prioriteitsvolgorde van lagen voor die declaratie om.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “@layer-declaratie en volgorde” gratis?
Ja — de volledige tekst van “@layer-declaratie en volgorde” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “@layer-declaratie en volgorde”?
Declareer benoemde cascade-lagen en bepaal hun prioriteitsvolgorde met @layer-statements. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “@layer-declaratie en volgorde”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- @layer-declaratie en volgorde
- Stijlen aan lagen toevoegen
- Laagprioriteit en interactie met !important
- Lagen in code van derden