Organisere egendefinert CSS med lag

Når du blander Tailwind-utility-klasser med egendefinert CSS, kan det oppstå konflikter i spesifisitet. En egendefinert CSS-regel som .btn { color: red; } kan overstyre en Tailwind-utility text-blue-500 på grunn av kildeordenen, selv om du hadde til hensikt at utility-klassen skulle vinne. Tailwinds @layer-direktiv løser dette ved å gi deg eksplisitt kontroll over hvor i CSS-kaskaden de egendefinerte stilene settes inn.

Tailwind organiserer all generert CSS i tre lag med fast rekkefølge: base kommer først og inneholder nullstillinger og standarder på elementnivå. components kommer som nummer to og er laget for abstraksjoner med flere utility-klasser. utilities kommer sist og inneholder alle utility-klasser med ett formål. Denne rekkefølgen sørger for at utility-klasser alltid vinner over komponentstiler, som igjen alltid vinner over grunnstiler – et forutsigbart og bevisst hierarki.

Base-laget er riktig sted for nullstillinger på elementnivå, standardstiler for HTML-elementer og globale stiler som alltid skal gjelde. Vanlige bruksområder er å angi standardskrift for body, etablere regler for box-sizing, nullstille marger på overskrifter og definere lenkestiler. Stiler i base-laget kan overstyres av alt i components- eller utilities-lagene.

Components-laget brukes til å trekke gjentatte kombinasjoner av utility-klasser ut i navngitte klasser ved hjelp av @apply. Komponentklasser som defineres her, kan overstyres av utility-klasser som brukes i HTML, fordi utility-klassene ligger i det senere utilities-laget. Dette gjør komponentklassene fleksible – de angir fornuftige standarder som alltid kan tilpasses for den enkelte forekomsten med utility-klasser.

Utilities-laget brukes til egendefinerte utility-klasser med ett formål som Tailwind ikke tilbyr ferdig. Dette kan være utility-klasser for CSS-egenskaper som ennå ikke finnes i Tailwinds kjerne, nettleserspesifikke egenskaper med prefiks eller sammensatte verdier som er for spesifikke for standardskalaen. Utility-klasser i dette laget har høyest prioritet og overstyrer både base- og komponentstiler.

CSS-spesifisitet avhenger normalt av selektorens vekt. Men spesifikasjonen for CSS-kaskadelag (som Tailwind benytter) overstyrer spesifisitet: En regel i et senere lag vinner alltid over en regel i et tidligere lag, uavhengig av hvor kompleks selektoren er. Det betyr at en klasse i .utilities-laget, som .p-4 (én klasse), automatisk vinner over en klasse i .components-laget, som .card.padded.extra (tre klasser).

Du er ikke begrenset til Tailwinds tre standardlag. Du kan definere helt egne navngitte lag ved hjelp av CSS @layer og styre hvor de vises i kaskaden ved å deklarere dem i riktig rekkefølge øverst i CSS-filen. Dette er nyttig når du skal integrere tredjepartsbiblioteker for CSS på bestemte steder i kaskaden, eller når du vil opprette en lagdelt arkitektur i din egen CSS.

CSS som skrives utenfor en @layer-blokk, har høyere spesifisitet enn alle lagdelte stiler. Det betyr at egendefinert CSS du skriver uten å omslutte den i @layer, alltid vil overstyre Tailwinds lagdelte utility-klasser, noe som potensielt kan føre til uventede layoutproblemer. Omslutt alltid de egendefinerte stilene i riktig lag – eller opprett uttrykkelig et overstyringslag – for å unngå konflikter med Tailwinds kaskade.

Direktivene @layer og @apply fungerer sammen. Du definerer et lag, plasserer komponent- eller utility-klasser i det og bruker @apply i disse klassene for å sette sammen Tailwind-utility-klasser. Denne kombinasjonen gir deg fordelene ved lag (forutsigbar kaskade) og bekvemmeligheten ved @apply (sammensetting fra eksisterende utility-klasser) i ett enkelt mønster.

Etter hvert som prosjektet vokser, bør du dele CSS-en på flere filer organisert etter lagenes formål. Importer alt i én enkelt inndatafil. Hold basestilene minimale – ta bare med ting som faktisk skal gjelde globalt. Hold komponentfilene organisert etter komponenttype. Bruk utility-filer for utility-klasser som faktisk mangler. Denne strukturen gjør det enklere å sette nye utviklere inn i prosjektet og hindrer at CSS-en blir en vedlikeholdsbyrde.

Når en stil ikke brukes som forventet, åpner du Chrome DevTools og ser på Styles-panelet. Gjennomstrekede deklarasjoner viser at stilene blir overstyrt. Hvis en utility-klasse blir gjennomstreket av din egen komponent-CSS, har du sannsynligvis plassert den utenfor et lag (slik at den får høyere kaskadeprioritet) eller i feil lag. Hvis du flytter den til @layer components, skal den riktige oppførselen der utility-klassen vinner, gjenopprettes.

I denne leksjonen lærte du at Tailwinds tre lag – base, components, utilities – danner et kaskadehierarki der hvert senere lag overstyrer tidligere lag, at @layer base brukes for standarder på elementnivå, @layer components for uttrekkede komponentklasser og @layer utilities for egendefinerte utility-klasser. Neste gang utforsker vi fallgruvene ved @apply og når du heller bør trekke ut komponenter.