CSS kan lastig te beheren zijn, vooral voor elke site van redelijke omvang. Krijg een helpende hand met deze preprocessor.

Laten we zeggen dat je leert over een heel coole CSS-functie, zoals nesten. Maar als je het probeert, realiseer je je dat de ondersteuning verschrikkelijk is en dat het jaren zal duren voordat je het eindelijk kunt gebruiken. Dit was een enorm probleem in CSS tot de introductie van preprocessors zoals PostCSS.

Ontdek hoe u met PostCSS moderne en toekomstige CSS kunt gebruiken tijdens de ontwikkeling. U zult precies ontdekken wat PostCSS is, hoe u het kunt gebruiken en hoe u het beste kunt profiteren van de functies ervan.

Het opzetten van het project

Navigeer naar een lege map, maak een bestand met de naam index.html en voeg de volgende HTML-opmaak toe aan het bestand:

html>
<htmllang="en">
<hoofd>
<koppelingrel="stijlblad"href="src/stijlen.css">
hoofd>


<lichaam>
<P>ParagraafP>
<div>afddiv>
lichaam>
html>

Dit HTML-document geeft een alinea en element. Het importeert ook een stijlbladbestand met de naam

stijlen.css dat is binnen de src map. Maak het bestand aan in de src map en neem de volgende CSS-stijlregels op:

lichaamP {
kleur: oranje;
}
lichaamdiv {
kleur: blauw;
}
lichaam {
weergave: rooster;
}

Deze CSS stijlt de kleur van beide elementen op de pagina en creëert een rasterlay-out. De meeste browsers ondersteunen de normale CSS-syntaxis zoals deze. Maar als je zicht hebt op nieuwere syntaxis, moet je PostCSS gebruiken.

Een Node.js-project maken en PostCSS installeren

Eenvoudig gezegd stelt PostCSS je in staat moderne CSS om te zetten in iets dat de meeste browsers kunnen begrijpen; een proces dat algemeen bekend staat als transpiling. Dit is perfect als u nieuwe, experimentele of niet-standaard CSS-eigenschappen in uw code wilt uitproberen die de meeste browsers mogelijk niet ondersteunen.

PostCSS biedt ook een rijk ecosysteem van JavaScript-plug-ins die u kunt installeren om bepaalde functies in te schakelen, zoals CSS-verkleining, kleurondersteuning en linting-ondersteuning.

Om PostCSS te gebruiken, moet u eerst een nieuw Node.js-project initialiseren:

npm begin -y

Met deze opdracht wordt een bestand package.json gegenereerd dat de standaardwaarden voor uw app bevat.

Installeer vervolgens zowel PostCSS als de PostCSS CLI. Met het tweede pakket kunt u PostCSS uitvoeren vanaf de opdrachtregel:

npm i --save-dev postcss postcss-cli

De --save-dev flag installeert beide npm-pakketten als dev-afhankelijkheden; je gaat alleen PostCSS en zijn plug-ins gebruiken om de CSS-code tijdens de ontwikkeling te verwerken.

Om PostCSS te gaan gebruiken via de opdrachtregelinterface, ga in uw pakket.json bestand en maak de simple bouwen: css commando voor transpilatie met PostCSS:

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

Deze opdracht neemt je kale CSS (opgeslagen in src/stijlen.css), transponeer de code en voer deze vervolgens uit in het bestem map. Het runnen van de npm-build: css opdracht maakt deze map aan en vult deze met de stijlen.css bestand met door de browser leesbare code.

Zorg er bij het importeren van uw CSS in de HTML voor dat u importeert vanuit de bestemmingsmap waarin u uw CSS compileert, en niet uit de bronmap waaruit PostCSS compileert. Dit is in ons geval de afstand map, niet de src map.

Als u uw website in een browser opent, ziet u dat de site nog steeds toegang heeft tot de CSS. Telkens wanneer u wijzigingen aanbrengt in het bronbestand, zal PostCSS de code opnieuw compileren en zullen de wijzigingen worden weergegeven op de webpagina.

PostCSS-plug-ins gebruiken

Er zijn er honderden PostCSS-plug-ins voor het toevoegen van voorvoegsels, linting, nieuwe syntaxisondersteuning en tientallen andere functies aan PostCSS. Nadat u een PostCSS-plug-in hebt geïnstalleerd, activeert u deze in de postcss.config.js file — een JavaScript-bestand dat u kunt gebruiken om alle configuraties voor PostCSS in te stellen.

Installeer de cssnano PostCSS-plug-in met de volgende opdracht:

npm i --save-dev cssnano

Nogmaals, u hoeft deze afhankelijkheden alleen op te slaan als dev-afhankelijkheden. De reden is dat dit allemaal gebeurt terwijl je je ontwikkelt. U hebt PostCSS of een van zijn plug-ins niet nodig nadat u de site naar productie heeft gepusht.

Om de nieuw geïnstalleerde cssnano-plug-in te gebruiken, voegt u de volgende code toe aan het postcss.config.js bestand:

const cssnano = vereisen("cssnano")
moduul.export = {
 plug-ins: [
 cssnano({
 vooraf ingesteld: 'standaard'
 })
 ]
}

Als je nu teruggaat naar de terminal en de build-opdracht opnieuw uitvoert, zal dit de uitvoer-CSS verkleinen (d.w.z. de code zo klein maken als menselijk mogelijk is). Dus wanneer u naar een productieklare site pusht, wordt uw CSS zo klein mogelijk.

Moderne functies zoals nesten gebruiken

Stel dat u de nesting-syntaxis in uw stylesheet wilt gebruiken, dus u vervangt het alineablok erin src/stijlen.css hiermee:

lichaam {
 & P {
kleur: oranje;
 }
}

Deze code is gelijk aan de versie in uw startcode. Maar dit levert een fout op omdat de syntaxis erg nieuw is en de meeste webbrowsers deze niet ondersteunen. U kunt ondersteuning voor deze syntaxis inschakelen met PostCSS door het postcss-preset-env inpluggen.

De plug-in compileert een aantal verschillende plug-ins voor het verwerken van CSS op basis van het stadium waarin het zich bevindt. Fase 0 vertegenwoordigt de superexperimentele functies die misschien niet eens in CSS komen. Terwijl fase 4 voor taalkenmerken is die al deel uitmaken van de CSS-specificatie.

Standaard, heden-env maakt gebruik van fase 2-functies (die het meest waarschijnlijk in CSS zullen worden opgenomen). Maar u kunt de stage wijzigen in wat u maar wilt in het configuratiebestand.

Voer de volgende opdracht uit om de plug-in te installeren:

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

Dan in jouw postcss.config.js bestand, importeert u de plug-in en registreert u deze:

const cssnano = vereisen("cssnano")
const postcssPresetEnv = vereisen("postcss-preset-env")
moduul.export = {
 plug-ins: [
 cssnano({
 vooraf ingesteld: 'standaard'
 }),
 postcssPresetEnv({ fase: 1})
 ]
}

U dient alleen de fase van de nieuwe CSS-code die u wilt gebruiken te passeren. In dit geval gaan we ervan uit dat de nestfunctie zich in fase 1 bevindt. Wanneer u de build-opdracht opnieuw uitvoert en de browser controleert, ziet u dat deze de geneste code heeft gecompileerd in standaard CSS die de browser kan begrijpen.

PostCSS gebruiken met frameworks

Het handmatig configureren van PostCSS kan een beetje vervelend zijn. Dit is de reden waarom bijna alle moderne frameworks worden geleverd met bundeltools (bijv. Vite, Snowpack en Parcel), en deze tools hebben ingebouwde ondersteuning voor PostCSS. En zelfs als dat niet het geval is, is het toevoegen van PostCSS-ondersteuning ongelooflijk eenvoudig.

Onthoud altijd dat Vite en de meeste andere bundelaars gebruiken ES6-modulesysteem, niet CommonJS. Om dit te omzeilen, moet u de importeren verklaring in plaats van vereisen() in uw postcssconfig.js bestand:

importeren cssnano van"cssnano"
// Configuratiecode komt hier

Zolang je de plug-ins hebt geïnstalleerd, werkt alles prima.

Meer informatie over SaSS

PostCSS is slechts een van de tientallen CSS-preprocessors die momenteel beschikbaar zijn. Een daarvan is SaSS, wat staat voor syntactisch geweldige stijlbladen.

Het leren gebruiken van een andere belangrijke preprocessor kan van pas komen als CSS-ontwikkelaar.