Přejít k navigační liště

Zdroják » Webdesign » PostCSS jako jednoduchá náhrada preprocesoru

PostCSS jako jednoduchá náhrada preprocesoru

Články Webdesign

PostCSS je nástroj pro transformaci CSS pomocí pluginů napsaných v Node.js. Naoko vlastně nic nedělá, je to ale nutná spodní vrstva pro fungování známějších a zajímavějších pluginů, například Autoprefixeru. V textu ukážu, jak jej využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží.

Článek původně vyšel na autorově webu Vzhůru dolů.

PostCSS versus CSS preprocesory

Rozdíl je už v momentě zpracování. Preprocesor (SASS, LESS, Stylus) předzpracovává, což v důsledku znamená, že vytváří nový jazyk, který se kompiluje do CSS. PostCSS je postprocesor. Více či méně předpokládá, že to co píšete je současná nebo budoucí verze CSS.

Další rozdíl je v modularitě. Preprocesory jsou monolity, velké potvory, jejichž všechny vlastnosti nikdy nevyužijete. PostCSS je modulární. Samo o sobě nic neumí, pro každou vlastnost si musíte doinstalovat plugin. To je samozřejmě taky trochu nevýhoda, protože to vyžaduje režii na učení a prozkoumávání. S tím vám tady můžu trochu pomoci.

Díky modularitě kompiluje rychleji. A může být i enormě rychlé. Podívejte se třeba na tyhle testy.

Dobré taky je, že mnoho PostCSS pluginů využívá standardizovanou syntaxi. CSS prostě píšete způsobem, který už dnes část prohlížečů umí nebo se předpokládá, že velmi brzy umět budou. Díky tomu můžete PostCSS použít jen jako fallback pro starší prohlížeče. Jenže v té standarizované syntaxi je ukrytý i ďábel. Hned vysvětlím.

Proč ne CSSnext?

Dole ukážu jednoduchý preprocesor, který jsem si v PostCSS poskládal z různých pluginů. Někteři z vás se mohou ptát, proč jsem nepoužil CSSnext. To je transpilátor budoucího CSS do stylů, kterým rozumí dnešní prohlížeče. CSSnext by mi vlastně většinu pluginů nahradilo.

Jenže pro mě je CSSnext z velké části demonstrace způsobu, jakým by se transpilátor dělat neměl. Příklady:

  • Pojmenované Media Queries jsou založené na @custom-media vlastnosti, která v nové verzi Working Draft pro Media Queries Level 4 už není. Nevím o žádné implementaci v prohlížeči.
  • Nativní mixiny si zase v CSSnext troufli založit na @apply pravidlu, která navrhuje Tab Atkinks. To je sice důležitá osoba, ale specifikaci napsal jako soukromník. Opět nevím o žádném pokračujícím specifikačním procesu, natož implementaci.

Tvůrci CSSnext prostě podlehli nedočkavosti a do „transpilátoru“ vložili i vlastnosti, které se v CSS možná nikdy neobjeví. Začali tím vlastně tvořit jen další preprocesor s vlastní nestandardní syntaxí.

Je pravda, že CSSnext obsahuje řadu pluginů, které chci sám používat: doplňování prefixů, fallbacky pro rem nebo nativní proměnné. Většinu ostatních vlastností ale neupotřebím.

Preprocesor pomocí PostCSS

Jak už jsem dříve psal, z preprocesorů toho moc nevyužívám: obejít se nedokážu hlavně bez proměnných a vkládaných importů. Teď ukážu, jak byste takhle malý preprocesor udělali pomocí PostCSS.

Vkládané importy

Importy, které znáte z preprocesorů, v čistém CSS neuděláte, proto doporučuji využít plugin postcss-easy-import. Umí také automaticky rozpoznat cesty k do /node_modules nebo importovat všechny soubory v adresáři:

/* komponenta z node_modules: */
@import "normalize.css"; 
/* relativní cesta: */
@import "./theme.css"; 
/* import všech souborů v adresáři: */
@import "./components/*.css"; 

Ještě chci zmínit, že jakmile váš web poběží na HTTP/2, vychází teoreticky lépe importy nevkládat a nechat server posílat jednotlivé soubory.

Proměnné

Proměnné se v CSS zapisují tímto způsobem:

:root {
  --colorPrimary: red;
}

a {
  color: var(--colorPrimary);
}

Mimochodem, nativní proměnné mají velmi dobrou podporu v prohlížečích. PostCSS potřebujete hlavně kvůli náhradnímu řešení pro Internet Explorery a Edge.

Je dobré vědět, že CSS proměnné jsou na rozdíl od preprocesorových sester dynamické. Dědí se a jsou dostupné v Javascriptu. Mrkněte se na Je čas.

Tyhle cool vlastnosti jsou ovšem dostupné jen v nativní podpoře. PostCSS plugin postcss-custom-properties se k proměnným chová stejně jako preprocesory.

Matematika (i s proměnnými)

CSS funkce calc() má širokou podporu, takže plugin postcss-calc potřebujete hlavně kvůli přepočítávání matematických výrazů právě s proměnnými.

Přidávání prefixů

Předpokládám, že Autoprefixer znáte. Na přidávání prohlížečových prefixů nic lepšího není.

Konfiguraci podporovaných prohlížečů je i kvůli dalším nástrojům nejlepší dělat přímo v package.json:

"browserslist": [
  "> 1%",
  "last 2 versions",
  "IE 8-9"
]

rem fallback

Plugin pixrem přidává náhradní řešení pro staré prohlížeče, které neumějí jednotku rem:

/* Fallback: */
margin-bottom: 48px;
/* Moderní prohlížeče: */
margin-bottom: 3rem;

Instalace a nastavení

Pokud používáte Grunt nebo Gulp, nejdříve přes NPM nainstalujte naše pluginy:

npm install 
  postcss postcss-easy-import postcss-calc 
  postcss-custom-properties autoprefixer pixrem  
  --save-dev

V Gruntfile.js si pak tenhle malý preprocesor přidáme do postcss sekce:

options: {
  map: true,
  processors: [
    require('postcss-easy-import'),
    require('postcss-custom-properties'),
    require('postcss-calc'),
    require('autoprefixer'),
    require('pixrem')
  ]
},
src: 'src/css/index.css',
dest: 'dist/css/index.css'

Více je v příkladu na Githubu.

Je to fajn základ, který můžete dále rozšiřovat, třeba o Style Lint a jiné pluginy. Inspirovat se můžete třeba i u preprocesoru, který si pro framework Suit napsal Nicolas Gallagher. Neváhejte do komentářů napsat, jaké další používáte vy.

PostCSS nebo preprocesor?

Když PostCSS vezmete jako jemné rozšíření vašeho CSS o proměnné a vkládané importy, s použitím na menší projekty neváhejte. Váš CSS kód bude kompatibilní i do budoucna a získáte velmi rychlou kompilaci.

Pro ostatní projekty prostě využijte preprocesory. Čím více budete ve stylech mít programátorského, imperativního kódu – mixinů, funkcí, cyklů – tím více potřebujete robustnější řešení. Jazyk, který je vymyšlený pro složité úkoly – nejlépe Sass. Extrémy jako frameworky typu Bootstrapu si prostě napsané v nativním CSS a transpilované pomocí PostCSS zatím představit neumím, ale i to se časem může srovnat.

ebook-vdcss3-prebal-final

Vzhůru do CSS3

Vylepšete své znalosti webového frontendu aktuálním přehledem nástrojů moderního kodéra a nových CSS3 vlastností v jednom ebooku.

Komentáře

Subscribe
Upozornit na
guest
1 Komentář
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Fosil

A co vnořování? S umírněným přístupem je to super vlastnost preprocesoru. Existuje nějaké řešení v tomhle kontextu?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.