Ako používať PostCSS na vyčistenie vášho webového dizajnu

Povedzme, že sa dozviete o skutočne skvelej funkcii CSS, ako je vnorenie. Ale keď to vyskúšate, uvedomíte si, že podpora je hrozná a kým ju budete môcť konečne použiť, potrvá roky. Toto býval obrovský problém v CSS až do zavedenia preprocesorov ako PostCSS.

Zistite, ako vám PostCSS umožňuje používať moderné a budúce CSS už dnes počas vývoja. Dozviete sa, čo presne je PostCSS, ako ho môžete používať a ako najlepšie využiť jeho funkcie.

Nastavenie projektu

Prejdite do prázdneho priečinka, vytvorte súbor s názvom index.html a pridajte do súboru nasledujúce označenie HTML:

html>
<htmllang="sk">
<hlavu>
<odkazrel="štýlov"href="src/styles.css">
hlavu>
<telo>
<p>Odsekp>
<div>Divdiv>
telo>
html>

Tento dokument HTML vykresľuje odsek a element. Importuje tiež súbor šablóny štýlov s názvom styles.css ktorá je vo vnútri src priečinok. Vytvorte súbor v src priečinok a zahŕňajú nasledujúce pravidlá štýlu CSS:

telop {
farba: oranžová;
}
telodiv {
farba: Modrá;
}
telo {
displej: mriežka;
}

Tento CSS upraví farbu oboch prvkov na stránke a vytvorí rozloženie mriežky. Väčšina prehliadačov podporuje normálnu syntax CSS, ako je táto. Ale keď sa pozriete na novšiu syntax, budete musieť zaviesť PostCSS.

Vytvorenie projektu Node.js a inštalácia PostCSS

Jednoducho povedané, PostCSS vám umožňuje previesť moderné CSS na niečo, čomu rozumie väčšina prehliadačov; proces bežne známy ako transpilácia. Je to perfektné, ak chcete vo svojom kóde vyskúšať nové, experimentálne alebo neštandardné vlastnosti CSS, ktoré hlavné prehliadače nemusia podporovať.

PostCSS tiež ponúka bohatý ekosystém doplnkov JavaScript, ktoré si môžete nainštalovať, aby ste povolili určité funkcie, ako je miniifikácia CSS, podpora farieb a podpora liningu.

Ak chcete použiť PostCSS, prvá vec, ktorú musíte urobiť, je inicializovať nový projekt Node.js:

npm init -y

Tento príkaz vygeneruje súbor package.json, ktorý obsahuje predvolené hodnoty pre vašu aplikáciu.

Ďalej nainštalujte PostCSS aj PostCSS CLI. Druhý balík vám umožňuje spustiť PostCSS z príkazového riadku:

npm i --save-dev postcss postcss-cli

The --save-dev flag nainštaluje obe npm balíčky ako závislosti vývoja; budete používať PostCSS a jeho doplnky iba na spracovanie kódu CSS počas vývoja.

Ak chcete začať používať PostCSS cez rozhranie príkazového riadku, choďte do svojho package.json súbor a vytvorte jednoduchý zostava: css príkaz na transpiláciu s PostCSS:

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

Tento príkaz prevezme váš holý CSS (uložený v src/styles.css), transpilujte kód a potom ho vypíšte do súboru dest priečinok. Spustenie zostava npm: css príkaz vytvorí tento priečinok a naplní ho priečinkom styles.css súbor obsahujúci kód čitateľný prehliadačom.

Keď importujete CSS do HTML, uistite sa, že importujete z cieľového priečinka, kde kompilujete CSS, a nie zo zdrojového priečinka, z ktorého PostCSS kompiluje. Toto je v našom prípade dist priečinok, nie priečinok src priečinok.

Ak otvoríte svoj web v prehliadači, uvidíte, že web stále pristupuje k CSS. Kedykoľvek vykonáte zmeny v zdrojovom súbore, PostCSS prekompiluje kód a zmeny sa prejavia na webovej stránke.

Používanie doplnkov PostCSS

Sú ich stovky PostCSS pluginy na pridávanie predpôn, lintingu, podpory novej syntaxe a desiatok ďalších funkcií do PostCSS. Po nainštalovaní doplnku PostCSS ho aktivujete vo vnútri postcss.config.js súbor — súbor JavaScript, ktorý môžete použiť na nastavenie všetkých konfigurácií pre PostCSS.

Nainštalujte cssnano PostCSS plugin s nasledujúcim príkazom:

npm i --save-dev cssnano

Opäť stačí tieto závislosti uložiť ako závislosti pre vývojárov. Dôvodom je, že toto všetko sa deje počas vášho vývoja. Po uvedení stránky do produkcie nepotrebujete PostCSS ani žiadny z jeho pluginov.

Ak chcete použiť novo nainštalovaný doplnok cssnano, musíte do súboru pridať nasledujúci kód postcss.config.js súbor:

konšt cssnano = vyžadovať("cssnano")
modul.exports = {
 pluginy: [
 cssnano({
 prednastavené: 'predvolené'
 })
 ]
}

Ak sa teraz vrátite k terminálu a znova spustíte príkaz na zostavenie, zmenší sa tým výstup CSS (t. j. kód bude taký malý, ako je len možné). Takže keď tlačíte na stránku pripravenú na produkciu, váš CSS bude čo najmenší.

Používanie moderných funkcií, ako je Nesting

Predpokladajme, že chcete použiť vnorenú syntax v šablóne so štýlmi, takže nahradíte blok odseku src/styles.css s tým:

telo {
 & p {
farba: oranžová;
 }
}

Tento kód je rovnaký ako verzia vo vašom štartovacom kóde. To však spôsobí chybu, pretože syntax je veľmi nová a väčšina webových prehliadačov ju nepodporuje. Podporu pre túto syntax s PostCSS môžete povoliť inštaláciou postcss-preset-env zapojiť.

Doplnok zostavuje množstvo rôznych doplnkov na prácu s CSS na základe toho, v akej fáze sa nachádza. Fáza 0 predstavuje super experimentálne funkcie, ktoré sa nemusia dostať ani do CSS. Zatiaľ čo fáza 4 je pre jazykové funkcie, ktoré sú už súčasťou špecifikácie CSS.

Predvolene, súčasnosť používa funkcie fázy 2 (ktoré sa s najväčšou pravdepodobnosťou dostanú do CSS). V konfiguračnom súbore však môžete zmeniť fázu na čokoľvek, čo chcete.

Ak chcete nainštalovať doplnok, spustite nasledujúci príkaz:

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

Potom v tvojom postcss.config.js súbor, musíte importovať doplnok a zaregistrovať ho:

konšt cssnano = vyžadovať("cssnano")
konšt postcssPresetEnv = vyžadovať("postcss-preset-env")
modul.exports = {
 pluginy: [
 cssnano({
 prednastavené: 'predvolené'
 }),
 postcssPresetEnv({ etapa: 1})
 ]
}

Mali by ste prejsť iba fázou nového kódu CSS, ktorý chcete použiť. V tomto prípade predpokladáme, že funkcia vnorenia je v štádiu 1. Keď znova spustíte príkaz build a skontrolujete prehliadač, uvidíte, že je skompilovaný vnorený kód do štandardného CSS, ktorému prehliadač rozumie.

Používanie PostCSS s rámcami

Manuálna konfigurácia PostCSS môže byť trochu bolestivá. To je dôvod, prečo sa takmer všetky moderné rámce dodávajú s balíčkovacími nástrojmi (napr. Vite, Snowpack a Parcel) a tieto nástroje budú mať vstavanú podporu pre PostCSS. A ak aj nie, proces pridávania podpory PostCSS je neuveriteľne jednoduchý.

Vždy si pamätajte, že Vite a väčšina ostatných zväzákov používa Modulový systém ES6, nie CommonJS. Aby ste to obišli, musíte použiť importovať vyhlásenie namiesto vyžadovať() v tvojom postcssconfig.js súbor:

importovať cssnano od"cssnano"
// Tu je konfiguračný kód

Pokiaľ máte nainštalované doplnky, všetko bude fungovať ako má.

Zistite viac o SaSS

PostCSS je len jedným z desiatok preprocesorov CSS, ktoré sú v súčasnosti k dispozícii. Jedným z nich je SaSS, čo znamená syntakticky úžasné štýly.

Naučiť sa používať ďalší hlavný preprocesor môže byť pre vývojárov CSS užitočné.