Lagen in code van derden

CSS-frameworks van derden (Bootstrap, Tailwind, Bulma) gebruiken vaak selectoren met een hoge specificiteit of !important, die conflicteren met je eigen stijlen. Door ze in lagen te plaatsen los je dit op zonder de broncode van het framework aan te passen.

Wijs geïmporteerde CSS van derden toe aan een vroege laag (met lage prioriteit):

Hoewel Bootstrap selectoren met een hoge specificiteit en !important gebruikt, betekent plaatsing in de laag vendor (die als eerste is gedeclareerd) dat je stijlen in latere lagen altijd winnen — zonder dat je de specificiteit van Bootstrap hoeft te evenaren of te overtreffen.

Voor externe CDN-koppelingen kun je geen @import layer gebruiken. Maak in plaats daarvan een strategie met een <link>-element door de inhoud van de CDN naar een lokaal laagblok te kopiëren of door een buildstap te gebruiken om die inhoud in te sluiten:

Een door JavaScript geïnjecteerd stijlblad (bijvoorbeeld van een onderdeel) kan niet eenvoudig in een laag worden geplaatst. Je kunt de stijlen ervan echter overschrijven in een later blok zonder laag in je stijlblad; dat heeft een hogere prioriteit dan elke laag.

Volledige configuratie voor het gebruiken van Bootstrap zonder specificiteitsstrijd:

Tailwind CSS gebruikt zelf intern @layer (@layer base, components, utilities). Je kunt Tailwind toevoegen aan een projectlaag voor leveranciers en je componenten en hulpmiddelen in lagen met hogere prioriteit houden.

Bibliotheken zoals Open Props (een bibliotheek voor CSS-aangepaste eigenschappen) zijn ontworpen voor gebruik met @layer. Ze bieden een laagimport voor een nette integratie zonder specificiteitsconflicten.

Plaats je CSS-reset in de laag met de laagste prioriteit, zodat deze alleen elementen beïnvloedt waarop je componenten geen invloed hebben:

Als je een CSS-bibliotheek verspreidt, documenteer dan de lagen die deze gebruikt. Gebruikers van je bibliotheek kunnen hun overschrijvingen in een blok zonder laag of in een later gedeclareerde laag plaatsen, die jouw lagen overschrijft zonder specificiteitstrucs.

Bij het opsporen van conflicten in CSS van derden toont het deelvenster Stijlen van DevTools de bronlaag van elke regel. Zoek naar annotaties zoals "(layer: vendor)" om stijlen van derden te herkennen die moeten worden overschreven.

Plaats CSS van derden in vroege lagen met lage prioriteit met @import layer(). Je stijlen in latere lagen overschrijven stijlen van derden automatisch, ongeacht de specificiteit. Zo los je integratieconflicten met frameworks op zonder code van leveranciers aan te passen, een hoge specificiteit te evenaren of !important te gebruiken om frameworks te overschrijven.