CSS kan være vanskelig at administrere, især for ethvert websted af rimelig størrelse. Få en hjælpende hånd med denne forprocessor.

Lad os sige, at du lærer om en rigtig fed CSS-funktion, såsom nesting. Men når du går videre og prøver det, indser du, at støtten er forfærdelig, og der vil gå år, før du endelig kan bruge den. Dette plejede at være et stort problem i CSS indtil introduktionen af ​​præprocessorer som PostCSS.

Lær, hvordan PostCSS giver dig mulighed for at bruge moderne og fremtidig CSS i dag under udvikling. Du vil finde ud af præcis, hvad PostCSS er, hvordan du kan bruge det, og den bedste måde at drage fordel af dets funktioner på.

Opsætning af projektet

Naviger ind i en tom mappe, opret en fil med navnet index.html, og tilføj følgende HTML-markering i filen:

html>
<htmllang="da">
<hoved>
<linkrel="stylesheet"href="src/styles.css">
hoved>


<legeme>
<s>Afsnits>
<div>Divdiv>
legeme>
html>

Dette HTML-dokument gengiver et afsnit og element. Det importerer også en stilarksfil med navnet styles.css det er inde i src folder. Opret filen i src mappe og inkludere følgende CSS-stilregler:

instagram viewer 
legemes {
farve: orange;
}
legemediv {
farve: blå;
}
legeme {
Skærm: gitter;
}

Denne CSS stiler farven på begge elementer på siden og opretter et gitterlayout. De fleste browsere understøtter normal CSS-syntaks som denne. Men når du har synet på nyere syntaks, skal du medbringe PostCSS.

Oprettelse af et Node.js-projekt og installation af PostCSS

Kort sagt giver PostCSS dig mulighed for at konvertere moderne CSS til noget, som de fleste browsere kan forstå; en proces almindeligvis kendt som transpilering. Dette er perfekt, hvis du vil prøve nye, eksperimentelle eller ikke-standard CSS-egenskaber i din kode, som større browsere muligvis ikke understøtter.

PostCSS tilbyder også et rigt økosystem af JavaScript-plugins, som du kan installere for at aktivere visse funktioner, såsom CSS-minifikation, farveunderstøttelse og fnugunderstøttelse.

For at bruge PostCSS er den første ting, du skal gøre, at initialisere et nyt Node.js-projekt:

npm init -y

Denne kommando genererer en package.json-fil, der indeholder standardværdierne for din app.

Installer derefter både PostCSS og PostCSS CLI. Den anden pakke giver dig mulighed for at køre PostCSS fra kommandolinjen:

npm i --save-dev postcss postcss-cli

Det --save-dev flag installerer begge dele npm pakker som udvikler afhængigheder; du vil kun bruge PostCSS og dets plugins til at behandle CSS-koden under udvikling.

For at begynde at bruge PostCSS via kommandolinjegrænseflade, gå ind i din package.json fil og lav det enkle bygge: css kommando til transpilering med PostCSS:

"scripts": {
"build: css": "postcss src/styles.css --dir dest -w"
}

Denne kommando tager din blottede CSS (gemt i src/styles.css), transpiler koden, og udlæs den derefter i dest folder. Kører npm build: css kommandoen opretter denne mappe og udfylder den med styles.css fil, der indeholder browserlæsbar kode.

Når du importerer din CSS til HTML, skal du sikre dig, at du importerer fra destinationsmappen, hvor du kompilerer din CSS, og ikke kildemappen, som PostCSS kompilerer fra. Dette er i vores tilfælde dist mappe, ikke src folder.

Hvis du åbner dit websted i en browser, vil du se, at webstedet stadig har adgang til CSS. Hver gang du foretager ændringer i kildefilen, vil PostCSS genkompilere koden, og ændringerne vil afspejle sig på websiden.

Brug af PostCSS-plugins

Der er hundredvis af PostCSS plugins til tilføjelse af præfikser, linting, ny syntaksunderstøttelse og snesevis af andre funktioner til PostCSS. Når du har installeret et PostCSS-plugin, aktiverer du det inde i postcss.config.js fil — en JavaScript-fil, som du kan bruge til at konfigurere alle konfigurationer for PostCSS.

Installer cssnano PostCSS plugin med følgende kommando:

npm i --save-dev cssnano

Endnu en gang behøver du kun at gemme disse afhængigheder som udviklerafhængigheder. Årsagen er, at alle disse sker, mens du udvikler dig. Du behøver ikke PostCSS eller nogen af ​​dets plugins efter at have skubbet webstedet til produktion.

For at bruge det nyligt installerede cssnano-plugin, skal du tilføje følgende kode i postcss.config.js fil:

konst cssnano = kræve("cssnano")
modul.exports = {
 plugins: [
 cssnano({
 forudindstillet: 'standarder'
 })
 ]
}

Hvis du nu går tilbage til terminalen og kører build-kommandoen igen, vil dette formindske output-CSS (dvs. gøre koden så lille som menneskeligt muligt). Så når du skubber til et produktionsklart websted, vil det gøre din CSS så lille som muligt.

Brug af moderne funktioner som Nesting

Antag, at du vil bruge indlejringssyntaksen i dit typografiark, så du erstatter afsnitsblokken i src/styles.css med dette:

legeme {
 & s {
farve: orange;
 }
}

Denne kode er den samme som versionen i din startkode. Men dette vil give en fejl, fordi syntaksen er meget ny, og de fleste webbrowsere understøtter den ikke. Du kan aktivere understøttelse af denne syntaks med PostCSS ved at installere postcss-preset-env plugin.

Pluginnet sammensætter en masse forskellige plugins til håndtering af CSS baseret på hvilket stadium det er. Trin 0 repræsenterer de supereksperimentelle funktioner, der måske ikke engang kommer ind i CSS. Mens trin 4 er til sprogfunktioner, der allerede er en del af CSS-specifikationen.

Som standard, nuværende-env bruger trin 2-funktioner (som højst sandsynligt bliver til CSS). Men du kan ændre scenen til hvad du vil i konfigurationsfilen.

For at installere plugin'et skal du køre følgende kommando:

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

Så i din postcss.config.js fil, skal du importere pluginnet og registrere det:

konst cssnano = kræve("cssnano")
konst postcssPresetEnv = kræve("postcss-preset-env")
modul.exports = {
 plugins: [
 cssnano({
 forudindstillet: 'standarder'
 }),
 postcssPresetEnv({ scene: 1})
 ]
}

Du bør kun bestå stadiet af den nye CSS-kode, du har til hensigt at bruge. I dette tilfælde antager vi, at indlejringsfunktionen er på trin 1. Når du kører build-kommandoen igen og tjekker browseren, vil du se, at den har kompileret den indlejrede kode til standard-CSS, som browseren kan forstå.

Brug af PostCSS med rammer

At konfigurere PostCSS manuelt kan være lidt af en smerte. Dette er grunden til, at næsten alle moderne rammer kommer med bundlingværktøjer (f.eks. Vite, Snowpack og Parcel), og disse værktøjer vil have understøttelse af PostCSS indbygget. Og selvom de ikke gør det, er processen med at tilføje PostCSS-understøttelse utrolig nem.

Husk altid, at Vite og de fleste andre bundtere bruger ES6 modulsystem, ikke CommonJS. For at komme uden om dette, skal du bruge importere erklæring i stedet for kræve() i din postcssconfig.js fil:

importere cssnano fra"cssnano"
// Konfigurationskoden går her

Så længe du har plugins installeret, vil alt fungere fint.

Lær mere om SaSS

PostCSS er blot en af ​​snesevis af CSS-forbehandlere, der er tilgængelige i øjeblikket. En af dem er SaSS, som står for syntaktisk fantastiske style sheets.

At lære at bruge en anden større præprocessor kan være praktisk som CSS-udvikler.