CSS kan vara knepigt att hantera, särskilt för alla webbplatser av rimlig storlek. Få en hjälpande hand med denna förprocessor.

Låt oss säga att du lär dig om en riktigt cool CSS-funktion, till exempel kapsling. Men när du går vidare och provar det inser du att stödet är fruktansvärt, och det kommer att ta år innan du äntligen kan använda det. Detta brukade vara ett stort problem i CSS fram till introduktionen av förprocessorer som PostCSS.

Lär dig hur PostCSS låter dig använda modern och framtida CSS idag under utveckling. Du får reda på exakt vad PostCSS är, hur du kan använda det och det bästa sättet att dra nytta av dess funktioner.

Konfigurera projektet

Navigera in i en tom mapp, skapa en fil med namnet index.html och lägg till följande HTML-uppmärkning i filen:

html>
<htmllang="en">
<huvud>
<länkrel="stilmall"href="src/styles.css">
huvud>


<kropp>
<sid>Paragrafsid>
<div>Divdiv>
kropp>
html>

Detta HTML-dokument återger ett stycke och element. Den importerar också en formatmallsfil med namnet styles.css som är inuti src mapp. Skapa filen i src mapp och inkludera följande CSS-stilregler:

instagram viewer 
kroppsid {
Färg: orange;
}
kroppdiv {
Färg: blå;
}
kropp {
visa: rutnät;
}

Denna CSS stilar färgen på båda elementen på sidan och skapar en rutnätslayout. De flesta webbläsare stöder normal CSS-syntax som denna. Men när du har koll på nyare syntax måste du ta in PostCSS.

Skapa ett Node.js-projekt och installera PostCSS

Enkelt uttryckt låter PostCSS dig konvertera modern CSS till något som de flesta webbläsare kan förstå; en process som vanligtvis kallas transpilering. Detta är perfekt om du vill prova nya, experimentella eller icke-standardiserade CSS-egenskaper i din kod som kanske inte stöds av större webbläsare.

PostCSS erbjuder också ett rikt ekosystem av JavaScript-plugin-program som du kan installera för att aktivera vissa funktioner, såsom CSS-minifiering, färgstöd och linting-stöd.

För att använda PostCSS är det första du behöver göra att initiera ett nytt Node.js-projekt:

npm init -y

Det här kommandot genererar en package.json-fil som innehåller standardvärdena för din app.

Installera sedan både PostCSS och PostCSS CLI. Det andra paketet låter dig köra PostCSS från kommandoraden:

npm i --save-dev postcss postcss-cli

De --save-dev flaggan installerar båda npm-paket som utvecklingsberoenden; du kommer bara att använda PostCSS och dess plugins för att bearbeta CSS-koden under utvecklingen.

För att börja använda PostCSS via kommandoradsgränssnitt, gå in på din package.json fil och skapa det enkla bygg: css kommando för transpilering med PostCSS:

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

Detta kommando tar din blotta CSS (lagrad i src/styles.css), tranpilera koden och mata sedan ut den i dest mapp. Kör npm build: css kommandot skapar den här mappen och fyller den med styles.css fil som innehåller webbläsbar kod.

När du importerar din CSS till HTML, se till att du importerar från målmappen där du kompilerar din CSS, och inte källmappen som PostCSS kompilerar från. Detta är i vårt fall dist mapp, inte src mapp.

Om du öppnar din webbplats i en webbläsare ser du att webbplatsen fortfarande har åtkomst till CSS. Varje gång du gör ändringar i källfilen kommer PostCSS att kompilera om koden och ändringarna kommer att återspeglas på webbsidan.

Använder PostCSS-plugins

Det finns hundratals PostCSS-plugins för att lägga till prefix, linting, nytt syntaxstöd och dussintals andra funktioner till PostCSS. Efter att ha installerat ett PostCSS-plugin, aktiverar du det inuti postcss.config.js fil — en JavaScript-fil som du kan använda för att ställa in alla konfigurationer för PostCSS.

Installera cssnano PostCSS-plugin med följande kommando:

npm i --save-dev cssnano

Återigen behöver du bara spara dessa beroenden som utvecklarberoenden. Anledningen är att alla dessa händer när du utvecklas. Du behöver inte PostCSS eller någon av dess plugins efter att ha drivit webbplatsen till produktion.

För att använda det nyinstallerade cssnano-pluginet, ska du lägga till följande kod i postcss.config.js fil:

konst cssnano = behöva("cssnano")
modul.exports = {
 plugins: [
 cssnano({
 förinställa: 'standardvärden'
 })
 ]
}

Om du nu går tillbaka till terminalen och kör byggkommandot igen, kommer detta att förminska utdata-CSS (dvs. göra koden så liten som mänskligt möjligt). Så när du trycker till en produktionsklar webbplats kommer den att göra din CSS så liten som möjligt.

Använder moderna funktioner som kapsling

Anta att du vill använda kapslingssyntaxen i din stilmall, så du byter ut styckeblocket i src/styles.css med detta:

kropp {
 & sid {
Färg: orange;
 }
}

Denna kod är densamma som versionen i din startkod. Men detta kommer att ge ett fel eftersom syntaxen är väldigt ny, och de flesta webbläsare stöder den inte. Du kan aktivera stöd för denna syntax med PostCSS genom att installera postcss-preset-env plugin.

Pluginet sammanställer ett gäng olika plugins för att hantera CSS baserat på vilket stadium det är. Steg 0 representerar de superexperimentella funktionerna som kanske inte ens kommer in i CSS. Medan steg 4 är för språkfunktioner som redan är en del av CSS-specifikationen.

Som standard, närvarande-env använder steg 2-funktioner (som med största sannolikhet kommer att bli CSS). Men du kan ändra scenen till vad du vill i konfigurationsfilen.

För att installera plugin, kör följande kommando:

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

Sedan i din postcss.config.js fil ska du importera plugin-programmet och registrera det:

konst cssnano = behöva("cssnano")
konst postcssPresetEnv = behöva("postcss-preset-env")
modul.exports = {
 plugins: [
 cssnano({
 förinställa: 'standardvärden'
 }),
 postcssPresetEnv({ skede: 1})
 ]
}

Du ska bara klara stadiet av den nya CSS-koden du tänker använda. I det här fallet antar vi att kapslingsfunktionen är i steg 1. När du kör byggkommandot igen och kontrollerar webbläsaren ser du att den har kompilerat den kapslade koden till standard-CSS som webbläsaren kan förstå.

Använda PostCSS med ramar

Att konfigurera PostCSS manuellt kan vara lite jobbigt. Det är därför nästan alla moderna ramverk kommer med paketeringsverktyg (t.ex. Vite, Snowpack och Parcel), och dessa verktyg kommer att ha stöd för PostCSS inbyggt. Och även om de inte gör det är processen att lägga till PostCSS-stöd otroligt enkel.

Kom alltid ihåg att Vite och de flesta andra buntare använder ES6 modulsystem, inte CommonJS. För att komma runt detta måste du använda importera uttalande i stället för behöva() i ditt postcssconfig.js fil:

importera cssnano från"cssnano"
// Konfigurationskoden går hit

Så länge du har plugins installerade kommer allt att fungera bra.

Lär dig mer om SaSS

PostCSS är bara en av dussintals CSS-förprocessorer som för närvarande finns tillgängliga. En av dem är SaSS, som står för syntaktiskt häftiga stilmallar.

Att lära sig använda en annan stor förprocessor kan komma väl till pass som CSS-utvecklare.