Slik bruker du PostCSS til å rydde opp i webdesignet ditt

La oss si at du lærer om en veldig kul CSS-funksjon, for eksempel nesting. Men når du går videre og prøver det, innser du at støtten er forferdelig, og det kommer til å ta år før du endelig kan bruke den. Dette pleide å være et stort problem i CSS frem til introduksjonen av forprosessorer som PostCSS.

Lær hvordan PostCSS lar deg bruke moderne og fremtidig CSS i dag under utvikling. Du vil finne ut nøyaktig hva PostCSS er, hvordan du kan bruke det, og den beste måten å dra nytte av funksjonene.

Sette opp prosjektet

Naviger inn i en tom mappe, lag en fil med navnet index.html, og legg til følgende HTML-oppmerking i filen:

html>
<htmllang="no">
<hode>
<linkrel="stilark"href="src/styles.css">
hode>
<kropp>
<s>Avsnitts>
<div>Divdiv>
kropp>
html>

Dette HTML-dokumentet gjengir et avsnitt og element. Den importerer også en stilarkfil med navnet styles.css som er inne i src mappe. Opprett filen i src mappe og inkludere følgende CSS-stilregler:

kropps {
farge: oransje;
}
kroppdiv {
farge: blå;
}
kropp {
vise: Nett;
}

Denne CSS stiler fargen på begge elementene på siden og lager et rutenettoppsett. De fleste nettlesere støtter vanlig CSS-syntaks som dette. Men når du har sett på nyere syntaks, må du ta inn PostCSS.

Opprette et Node.js-prosjekt og installere PostCSS

Enkelt sagt lar PostCSS deg konvertere moderne CSS til noe som de fleste nettlesere kan forstå; en prosess som vanligvis kalles transpilering. Dette er perfekt hvis du ønsker å prøve ut nye, eksperimentelle eller ikke-standardiserte CSS-egenskaper i koden din som store nettlesere kanskje ikke støtter.

PostCSS tilbyr også et rikt økosystem av JavaScript-plugins som du kan installere for å aktivere visse funksjoner, for eksempel CSS-minifisering, fargestøtte og linting-støtte.

For å bruke PostCSS er det første du må gjøre å initialisere et nytt Node.js-prosjekt:

npm init -y

Denne kommandoen vil generere en package.json-fil som inneholder standardverdiene for appen din.

Deretter installerer du både PostCSS og PostCSS CLI. Den andre pakken lar deg kjøre PostCSS fra kommandolinjen:

npm i --save-dev postcss postcss-cli

De --save-dev flagget installerer begge npm-pakker som utviklingsavhengigheter; du kommer bare til å bruke PostCSS og dets plugins for å behandle CSS-koden under utviklingen.

For å begynne å bruke PostCSS via kommandolinjegrensesnitt, gå inn i din package.json fil og lag det enkle bygge: css kommando for transpilering med PostCSS:

"skript": {
"bygg: css": "postcss src/styles.css --dir dest -w"
}

Denne kommandoen tar din bare CSS (lagret i src/styles.css), transpiler koden, og send den deretter ut i dest mappe. Kjører npm build: css kommandoen oppretter denne mappen og fyller den med styles.css fil som inneholder nettleserlesbar kode.

Når du importerer CSS-en til HTML-en, sørg for at du importerer fra målmappen der du kompilerer CSS-en, og ikke kildemappen som PostCSS kompilerer fra. Dette er i vårt tilfelle dist mappen, ikke src mappe.

Hvis du åpner nettstedet ditt i en nettleser, vil du se at nettstedet fortsatt har tilgang til CSS. Hver gang du gjør endringer i kildefilen, vil PostCSS kompilere koden på nytt og endringene vil gjenspeiles på nettsiden.

Bruker PostCSS-plugins

Det er hundrevis av PostCSS-plugins for å legge til prefikser, linting, ny syntaksstøtte og dusinvis av andre funksjoner til PostCSS. Etter å ha installert en PostCSS-plugin, aktiverer du den inne i postcss.config.js fil — en JavaScript-fil som du kan bruke til å sette opp alle konfigurasjonene for PostCSS.

Installer cssnano PostCSS-plugin med følgende kommando:

npm i --save-dev cssnano

Nok en gang trenger du bare å lagre disse avhengighetene som dev-avhengigheter. Grunnen er at alle disse skjer mens du utvikler deg. Du trenger ikke PostCSS eller noen av dets plugins etter å ha presset nettstedet til produksjon.

For å bruke den nylig installerte cssnano-pluginen, må du legge til følgende kode i postcss.config.js fil:

konst cssnano = krever("cssnano")
modul.exports = {
 plugins: [
 cssnano({
 forhåndsinnstilt: 'standarder'
 })
 ]
}

Hvis du nå går tilbake til terminalen og kjører byggekommandoen på nytt, vil dette minimere utgangs-CSS (dvs. gjøre koden så liten som menneskelig mulig). Så når du skyver til et produksjonsklart nettsted, kommer det til å gjøre CSS-en din så liten som mulig.

Bruke moderne funksjoner som hekking

Anta at du vil bruke neste-syntaksen i stilarket ditt, så du erstatter avsnittsblokken i src/styles.css med dette:

kropp {
 & s {
farge: oransje;
 }
}

Denne koden er den samme som versjonen i startkoden din. Men dette vil gi en feil fordi syntaksen er veldig ny, og de fleste nettlesere støtter den ikke. Du kan aktivere støtte for denne syntaksen med PostCSS ved å installere postcss-preset-env plugg inn.

Plugin kompilerer sammen en haug med forskjellige plugins for håndtering av CSS basert på hvilket stadium det er. Trinn 0 representerer de supereksperimentelle funksjonene som kanskje ikke en gang kommer inn i CSS. Mens trinn 4 er for språkfunksjoner som allerede er en del av CSS-spesifikasjonen.

Som standard, nåværende-env bruker trinn 2-funksjoner (som mest sannsynlig vil gjøre det til CSS). Men du kan endre scenen til hva du vil i konfigurasjonsfilen.

For å installere plugin, kjør følgende kommando:

npm i --save-dev postcss-preset-env

Så i din postcss.config.js fil, skal du importere plugin-en og registrere den:

konst cssnano = krever("cssnano")
konst postcssPresetEnv = krever("postcss-preset-env")
modul.exports = {
 plugins: [
 cssnano({
 forhåndsinnstilt: 'standarder'
 }),
 postcssPresetEnv({ scene: 1})
 ]
}

Du bør bare bestå stadiet av den nye CSS-koden du har tenkt å bruke. I dette tilfellet antar vi at hekkefunksjonen er på trinn 1. Når du kjører byggkommandoen på nytt og sjekker nettleseren, vil du se at den har kompilert den nestede koden til standard CSS som nettleseren kan forstå.

Bruk av PostCSS med rammeverk

Å konfigurere PostCSS manuelt kan være litt av en smerte. Dette er grunnen til at nesten alle moderne rammeverk kommer med pakkeverktøy (f.eks. Vite, Snowpack og Parcel), og disse verktøyene vil ha støtte for PostCSS innebygd. Og selv om de ikke gjør det, er prosessen med å legge til PostCSS-støtte utrolig enkel.

Husk alltid at Vite og de fleste andre buntere bruker ES6 modulsystem, ikke CommonJS. For å komme rundt dette må du bruke import uttalelse i stedet for krever() i din postcssconfig.js fil:

import cssnano fra"cssnano"
// Konfigurasjonskoden går her

Så lenge du har pluginene installert, vil alt fungere helt fint.

Lær mer om SaSS

PostCSS er bare en av dusinvis av CSS-forprosessorer som er tilgjengelig for øyeblikket. En av dem er SaSS, som står for syntaktisk fantastiske stilark.

Å lære å bruke en annen stor forprosessor kan komme godt med som CSS-utvikler.