Přechod webu z Compassu na PostCSS

Martin Kolář   2. 5. 2017


Dobře zvolené technologie šetří čas a zpříjemňují celý proces vývoje webu. Podívejte se, jak jsme přecházeli z Compassu na PostCSS, které nám generují výsledné CSS. Pokud nechcete číst návod, pusťte si rovnou video pod článkem a nastavte konečně správně svou workflow.

Vyplatí se to?

Otázka, která musí padnout. Ve většině případů je odpověď ano, ale nemusí to platit vždycky. Je důležité, kterou ze dvou variant přechodu zvolit, kolik vám která zabere času a jaké úspory může ve výsledku přinést.

Vše, nebo nic!

Vzít celý projekt a přenést ho do nového workflow je radikální možnost. Začátek přechodu je důležité naplánovat v období, kdy se nechystá nebo není rozpracovaná nová feature. To si pak zahráváte s konflikty a dalším přepisováním. Ideálně připravte všechny „nezávislé“ věci předem: připravte task runner, nastavte tasky a pak vezměte své .scss soubory a začněte přepisovat.

Den D

Pokud máte vše připravené a nemáte žádnou rozpracovanou feature, můžete se do toho pustit. Klasický e-shop by neměl zabrat více než den. Začněte lehce a přejmenujte soubory. Pokud vás čeká více projektů, je dobré přejmenování automatizovat. Manuálně si můžete pomoci s Finderem a hromadným přejmenováním.

Budete nenávidět @include

Pokud děláte v Compassu, určitě milujete @include. Při přechodu ho ale budete nenávidět. Není nic lepšího než je manuálně přepsat. Určitě pomůže Find&Replace v Sublime, zbytek už se dá zvládnout.

Komentáře

Máte rádi jednořádkové komentáře? Teď vám budou ničit život. Je potřeba je všechny přepsat do klasického CSS /* zápisu */.

Mixiny a další

Určitě počítejte i se sprity (pokud používáte), extend nebo barevnými funkcemi. Vše se ale dá pohodlně vyřešit vhodným balíčkem do task runneru.

Postupný přechod

Druhá a méně radikální verze je měnit web postupně. Pokud plánujete redesign či větší úpravy na webu, je to vhodná varianta. Budete sice v průběhu bojovat s více CSS soubory, ale ve výsledku bude krásný a čistý kód. Jak nám to jde, můžete sledovat při postupném redesignu našich stránek.

Když už nad změnou uvažujete reálně, získejte nejdříve důležité zkušenosti předem. Napište si v PostCSS nějaký projekt a teprve pak se pusťte do přepisování Compassu na PostCSS. Nebudete tápat a hlavně pochopíte rozdíl mezi pre-processingem a post-processingem dříve, než bude pozdě.

Má to cenu?

Teď už k této otázce máte více informací a můžete se lépe rozhodnout. Pokud se vám CSS přes Compass kompilují příliš dlouho, můžete ušetřit i sekundy. Ano, ve finále může jít o hodnotu přes 7 000 kompilací, aby se to vyplatilo. Při kombinací browserSync a dalších balíčků se to ale může vrátit dříve, než by se mohlo zdát. Neztrácejte zbytečně svůj čas.

Lightning talks, Frontendisti.cz Meetup

ARVE Error: The [[arve]] shortcode needs one of this attributes av1mp4, mp4, m4v, webm, ogv, url
ARVE Error: The [[arve]] shortcode needs one of this attributes av1mp4, mp4, m4v, webm, ogv, url