CSS: n hallinta voi olla hankalaa, etenkin kohtuullisen kokoisilla sivustoilla. Hanki auttava käsi tämän esiprosessorin kanssa.

Oletetaan, että opit todella hienosta CSS-ominaisuudesta, kuten sisäkkäisistä. Mutta kun jatkat ja kokeilet sitä, huomaat, että tuki on kauheaa, ja kestää vuosia, ennen kuin voit vihdoin käyttää sitä. Tämä oli ennen valtava ongelma CSS: ssä, kunnes esikäsittelijät, kuten PostCSS, otettiin käyttöön.

Opi kuinka PostCSS antaa sinun käyttää nykyaikaista ja tulevaa CSS: ää kehitystyön aikana. Saat selville tarkalleen, mitä PostCSS on, kuinka voit käyttää sitä ja miten voit hyödyntää sen ominaisuuksia parhaiten.

Projektin perustaminen

Siirry tyhjään kansioon, luo tiedosto nimeltä index.html ja lisää tiedostoon seuraavat HTML-merkinnät:

html>
<htmllang="en">
<pää>
<linkkirel="tyylitaulukko"href="src/styles.css">
pää>


<kehon>
<s>Kohtas>
<div>Divdiv>
kehon>
html>

Tämä HTML-dokumentti tekee kappaleen ja elementti. Se myös tuo tyylisivutiedoston nimeltä styles.css joka on sisällä src kansio. Luo tiedosto hakemistoon src kansio ja sisällytä seuraavat CSS-tyylisäännöt:

instagram viewer 
kehons {
väri: oranssi;
}
kehondiv {
väri: sininen;
}
kehon {
näyttö: ruudukko;
}

Tämä CSS tyylittelee sivun molempien elementtien värit ja luo ruudukkoasettelun. Useimmat selaimet tukevat normaalia CSS-syntaksia, kuten tämä. Mutta kun näet uudemman syntaksin, sinun on tuotava sisään PostCSS.

Node.js-projektin luominen ja PostCSS: n asentaminen

Yksinkertaisesti sanottuna PostCSS: n avulla voit muuntaa nykyaikaisen CSS: n sellaiseksi, jota useimmat selaimet ymmärtävät; prosessi, joka tunnetaan yleisesti nimellä transpiling. Tämä on täydellinen, jos haluat kokeilla uusia, kokeellisia tai ei-standardeja CSS-ominaisuuksia koodissasi, joita suuret selaimet eivät välttämättä tue.

PostCSS tarjoaa myös runsaan ekosysteemin JavaScript-laajennuksia, jotka voit asentaa ottaaksesi käyttöön tietyt ominaisuudet, kuten CSS-pienennys, värituki ja lintujen tuki.

Jos haluat käyttää PostCSS: ää, sinun on ensin alustettava uusi Node.js-projekti:

npm init -y

Tämä komento luo package.json-tiedoston, joka sisältää sovelluksesi oletusarvot.

Asenna seuraavaksi sekä PostCSS että PostCSS CLI. Toisen paketin avulla voit suorittaa PostCSS: n komentoriviltä:

npm i --save-dev postcss postcss-cli

The --save-dev lippu asentaa molemmat npm-paketteja kehittäjäriippuvuuksina; käytät vain PostCSS: ää ja sen lisäosia CSS-koodin käsittelyyn kehityksen aikana.

Voit aloittaa PostCSS: n käytön komentorivin käyttöliittymä, mene omaan package.json tiedosto ja luo yksinkertainen rakentaa: css komento siirtoon PostCSS: llä:

"käsikirjoitukset": {
"build: css": "postcss src/styles.css --dir dest -w"
}

Tämä komento ottaa paljaan CSS: n (tallennettuna src/styles.css), transpiloi koodi ja tulosta se sitten tiedostoon dest kansio. Juoksemassa npm build: css komento luo tämän kansion ja täyttää sen styles.css tiedosto, joka sisältää selaimella luettavan koodin.

Kun tuot CSS: n HTML-koodiin, varmista, että tuot kohdekansiosta, johon käännät CSS: ää, etkä lähdekansiosta, josta PostCSS kääntää. Tämä on meidän tapauksessamme dist kansio, ei src kansio.

Jos avaat verkkosivustosi selaimessa, näet, että sivusto käyttää edelleen CSS: ää. Aina kun teet muutoksia lähdetiedostoon, PostCSS kääntää koodin uudelleen ja muutokset näkyvät verkkosivulla.

PostCSS-laajennusten käyttäminen

Niitä on satoja PostCSS-laajennukset etuliitteiden, lintingin, uuden syntaksin tuen ja kymmenien muiden ominaisuuksien lisäämiseen PostCSS: ään. Kun olet asentanut PostCSS-laajennuksen, aktivoit sen sisällä postcss.config.js tiedosto — JavaScript-tiedosto, jonka avulla voit määrittää kaikki PostCSS: n asetukset.

Asenna cssnano PostCSS-laajennus seuraavalla komennolla:

npm i --save-dev cssnano

Jälleen kerran, sinun tarvitsee vain tallentaa nämä riippuvuudet kehittäjäriippuvuuksina. Syynä on, että kaikki nämä tapahtuvat kehittyessäsi. Et tarvitse PostCSS: ää tai sen laajennuksia, kun olet työstänyt sivuston tuotantoon.

Jos haluat käyttää äskettäin asennettua cssnano-laajennusta, sinun on lisättävä seuraava koodi postcss.config.js tiedosto:

konst cssnano = vaatia("cssnano")
moduuli.exports = {
 lisäosat: [
 cssnano({
 esiasetus: 'oletukset'
 })
 ]
}

Jos nyt palaat päätteeseen ja suoritat build-komennon uudelleen, tämä pienentää CSS-tulostusta (eli tekee koodista niin pienen kuin inhimillisesti mahdollista). Joten kun siirryt tuotantovalmiille sivustoille, se tekee CSS: stäsi mahdollisimman pienen.

Käytä nykyaikaisia ​​ominaisuuksia, kuten Nesting

Oletetaan, että haluat käyttää sisäkkäistä syntaksia tyylitaulukossasi, joten korvaat kappalelohkon src/styles.css tämän kanssa:

kehon {
 & s {
väri: oranssi;
 }
}

Tämä koodi on sama kuin aloituskoodissasi oleva versio. Mutta tämä aiheuttaa virheen, koska syntaksi on hyvin uusi, ja useimmat verkkoselaimet eivät tue sitä. Voit ottaa käyttöön tämän syntaksin tuen PostCSS: n kanssa asentamalla postcss-preset-env kytkeä.

Plugin kokoaa yhteen joukon erilaisia ​​laajennuksia CSS: n käsittelyyn sen mukaan, missä vaiheessa se on. Vaihe 0 edustaa superkokeellisia ominaisuuksia, jotka eivät välttämättä edes pääse CSS: ään. Sen sijaan vaihe 4 on tarkoitettu kieliominaisuuksille, jotka ovat jo osa CSS-spesifikaatiota.

Oletuksena, nykyinen-env käyttää vaiheen 2 ominaisuuksia (jotka todennäköisimmin pääsevät CSS: ään). Mutta voit muuttaa vaiheen haluamaksesi asetustiedostossa.

Asenna laajennus suorittamalla seuraava komento:

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

Sitten sinun postcss.config.js tiedosto, sinun on tuotava laajennus ja rekisteröitävä se:

konst cssnano = vaatia("cssnano")
konst postcssPresetEnv = vaatia("postcss-preset-env")
moduuli.exports = {
 lisäosat: [
 cssnano({
 esiasetus: 'oletukset'
 }),
 postcssPresetEnv({ vaiheessa: 1})
 ]
}

Sinun tulee läpäistä vain se uusi CSS-koodi, jota aiot käyttää. Tässä tapauksessa oletamme, että sisäkkäisyysominaisuus on vaiheessa 1. Kun suoritat build-komennon uudelleen ja tarkistat selaimen, huomaat, että se on käännetty sisäkkäisen koodin vakio-CSS: ään, jota selain ymmärtää.

PostCSS: n käyttö kehysten kanssa

PostCSS: n määrittäminen manuaalisesti voi olla hieman tuskaa. Tästä syystä lähes kaikissa nykyaikaisissa kehyksissä on niputustyökalut (esim. Vite, Snowpack ja Parcel), ja näissä työkaluissa on sisäänrakennettu tuki PostCSS: lle. Ja vaikka eivät, PostCSS-tuen lisääminen on uskomattoman helppoa.

Muista aina, että Vite ja useimmat muut niputtajat käyttävät ES6-moduulijärjestelmä, ei CommonJS. Tämän kiertämiseksi sinun on käytettävä tuonti lausunto tilalle vaatia() sinun postcssconfig.js tiedosto:

tuonti cssnano alkaen"cssnano"
// Asetuskoodi menee tähän

Niin kauan kuin sinulla on lisäosat asennettuna, kaikki toimii hyvin.

Lisätietoja SaSS: stä

PostCSS on vain yksi kymmenistä tällä hetkellä saatavilla olevista CSS-esiprosessoreista. Yksi niistä on SaSS, joka tarkoittaa syntaktisesti mahtavia tyylisivuja.

Toisen suuren esiprosessorin käytön oppiminen voi olla hyödyllistä CSS-kehittäjänä.