Správa CSS může být obtížná, zejména u jakéhokoli webu přiměřeně velké. Získejte pomocnou ruku s tímto preprocesorem.

Řekněme, že se dozvíte o opravdu skvělé funkci CSS, jako je vnořování. Ale když to vyzkoušíte, uvědomíte si, že podpora je hrozná a bude trvat roky, než ji konečně využijete. To býval obrovský problém v CSS až do zavedení preprocesorů jako PostCSS.

Přečtěte si, jak vám PostCSS umožňuje používat moderní a budoucí CSS již dnes během vývoje. Zjistíte, co přesně PostCSS je, jak jej můžete používat a jak nejlépe využít jeho funkcí.

Nastavení projektu

Přejděte do prázdné složky, vytvořte soubor s názvem index.html a přidejte do souboru následující značku HTML:

html>
<htmllang="en">
<hlava>
<odkazrel="stylesheet"href="src/styles.css">
hlava>


<tělo>
<p>Odstavecp>
<div>Divdiv>
tělo>
html>

Tento dokument HTML vykresluje odstavec a živel. Importuje také soubor šablony stylů s názvem styly.css to je uvnitř src složku. Vytvořte soubor v src složku a zahrnout následující pravidla stylu CSS:

tělop {
barva: oranžový;
}
tělodiv {
barva: modrý;
}
tělo {
Zobrazit: mřížka;
}
instagram viewer

Tento CSS stylizuje barvu obou prvků na stránce a vytváří rozvržení mřížky. Většina prohlížečů podporuje normální syntaxi CSS, jako je tato. Ale až budete mít pohled na novější syntaxi, budete muset zavést PostCSS.

Vytvoření projektu Node.js a instalace PostCSS

Jednoduše řečeno, PostCSS vám umožňuje převést moderní CSS na něco, čemu rozumí většina prohlížečů; proces běžně známý jako transpilace. To je perfektní, pokud chcete ve svém kódu vyzkoušet nové, experimentální nebo nestandardní vlastnosti CSS, které velké prohlížeče nemusí podporovat.

PostCSS také nabízí bohatý ekosystém zásuvných modulů JavaScript, které si můžete nainstalovat, abyste povolili určité funkce, jako je minimalizace CSS, podpora barev a podpora lintingu.

Chcete-li použít PostCSS, první věc, kterou musíte udělat, je inicializovat nový projekt Node.js:

npm init -y

Tento příkaz vygeneruje soubor package.json, který obsahuje výchozí hodnoty pro vaši aplikaci.

Dále nainstalujte PostCSS i PostCSS CLI. Druhý balíček umožňuje spouštět PostCSS z příkazového řádku:

npm i --save-dev postcss postcss-cli

The --save-dev flag nainstaluje oba npm balíčky jako dev závislosti; budete používat PostCSS a jeho pluginy pouze ke zpracování kódu CSS během vývoje.

Chcete-li začít používat PostCSS prostřednictvím rozhraní příkazového řádku, jděte do svého package.json soubor a vytvořte jednoduchý sestavení: css příkaz pro transpilaci pomocí PostCSS:

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

Tento příkaz převezme vaše holé CSS (uložené v src/styles.css), transpilujte kód a poté jej vydejte do souboru cíl složku. Spuštění npm sestavení: css příkaz vytvoří tuto složku a naplní ji styly.css soubor obsahující kód čitelný prohlížečem.

Když importujete CSS do HTML, ujistěte se, že importujete z cílové složky, kde kompilujete CSS, a ne ze zdrojové složky, ze které PostCSS kompiluje. Toto je v našem případě dist složku, nikoli src složku.

Pokud svůj web otevřete v prohlížeči, uvidíte, že web stále přistupuje k CSS. Kdykoli provedete změny ve zdrojovém souboru, PostCSS znovu zkompiluje kód a změny se projeví na webové stránce.

Používání pluginů PostCSS

Jsou jich stovky PostCSS pluginy pro přidávání prefixů, lintingu, podpory nové syntaxe a desítek dalších funkcí do PostCSS. Po instalaci pluginu PostCSS jej aktivujete uvnitř postcss.config.js soubor — soubor JavaScript, který můžete použít k nastavení všech konfigurací pro PostCSS.

Nainstalujte cssnano PostCSS plugin s následujícím příkazem:

npm i --save-dev cssnano

Opět stačí tyto závislosti uložit jako závislosti pro vývojáře. Důvodem je to, že se to všechno děje, když se vyvíjíte. Po uvedení webu do produkce nepotřebujete PostCSS ani žádný z jeho pluginů.

Chcete-li použít nově nainstalovaný plugin cssnano, musíte do něj přidat následující kód postcss.config.js soubor:

konst cssnano = vyžadovat("cssnano")
modul.exports = {
 pluginy: [
 cssnano({
 přednastavení: 'výchozí'
 })
 ]
}

Pokud se nyní vrátíte k terminálu a znovu spustíte příkaz build, bude to minimalizovat výstupní CSS (tj. kód bude tak malý, jak je to jen možné). Když tedy přejdete na web připravený k produkci, vaše CSS bude co nejmenší.

Použití moderních funkcí, jako je Nesting

Předpokládejme, že chcete ve své šabloně stylů použít syntaxi vnoření, takže nahradíte blok odstavce src/styles.css s tím:

tělo {
 & p {
barva: oranžový;
 }
}

Tento kód je stejný jako verze ve vašem startovacím kódu. To však vyvolá chybu, protože syntaxe je velmi nová a většina webových prohlížečů ji nepodporuje. Podporu této syntaxe můžete povolit pomocí PostCSS instalací postcss-preset-env zapojit.

Plugin sestavuje dohromady spoustu různých pluginů pro práci s CSS podle toho, v jaké fázi se nachází. Fáze 0 představuje super experimentální funkce, které se do CSS ani nemusí dostat. Zatímco fáze 4 je pro jazykové funkce, které jsou již součástí specifikace CSS.

Ve výchozím stavu, současnost používá funkce fáze 2 (které se s největší pravděpodobností dostanou do CSS). V konfiguračním souboru ale můžete změnit scénu na cokoliv chcete.

Chcete-li nainstalovat plugin, spusťte následující příkaz:

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

Pak ve vašem postcss.config.js soubor, musíte plugin importovat a zaregistrovat:

konst cssnano = vyžadovat("cssnano")
konst postcssPresetEnv = vyžadovat("postcss-preset-env")
modul.exports = {
 pluginy: [
 cssnano({
 přednastavení: 'výchozí'
 }),
 postcssPresetEnv({ etapa: 1})
 ]
}

Měli byste projít pouze fází nového kódu CSS, který hodláte použít. V tomto případě předpokládáme, že funkce vnoření je ve fázi 1. Když znovu spustíte příkaz build a zkontrolujete prohlížeč, uvidíte, že zkompiloval vnořený kód do standardního CSS, kterému prohlížeč rozumí.

Použití PostCSS s frameworky

Ruční konfigurace PostCSS může být trochu bolestivá. To je důvod, proč téměř všechny moderní rámce přicházejí s balicími nástroji (např. Vite, Snowpack a Parcel) a tyto nástroje budou mít vestavěnou podporu pro PostCSS. A i kdyby ne, proces přidání podpory PostCSS je neuvěřitelně snadný.

Vždy si pamatujte, že Vite a většina ostatních bundlerů používá Modulový systém ES6, nikoli CommonJS. Chcete-li to obejít, musíte použít import prohlášení na místě vyžadovat() ve vašem postcssconfig.js soubor:

import cssnano z"cssnano"
// Konfigurační kód je zde

Dokud máte nainstalované pluginy, bude vše fungovat dobře.

Zjistěte více o SaSS

PostCSS je pouze jedním z desítek preprocesorů CSS, které jsou v současné době k dispozici. Jedním z nich je SaSS, což je zkratka pro syntakticky úžasné styly.

Naučit se používat další hlavní preprocesor se může jako vývojáři CSS hodit.