Tailwind CSS

Prečo sa CSS na vašom webe po pár mesiacoch nedá bezpečne meniť?

Píšem frontend v Tailwind CSS: dizajnový systém v konfigurácii, konzistentné komponenty a štýly, ktoré sa dajú meniť bez obavy, že sa rozsype iná stránka. Funguje so Sage témami, Alpine aj Reactom.

Prebrať frontend Späť na hlavnú stránku

Klasické CSS na weboch starne zvláštnym spôsobom. Prvý súbor je prehľadný, po roku má tri tisíc riadkov, štyri triedy pre to isté tlačidlo a niekoľko výnimiek s dôležitosťou, ktoré tam niekto pridal, aby prebil predchádzajúcu výnimku. Nikto nevie, ktoré pravidlá sa ešte používajú, takže sa radšej nič nemaže a súbor rastie ďalej. Zmena, ktorá znie ako pätnásť minút práce, potom znamená hodinu overovania, či sa niekde inde niečo nerozbilo.

Tailwind CSS tento problém rieši tým, že štýl zostane pri komponente. Namiesto vymýšľania názvov tried a udržiavania paralelného CSS súboru sa vzhľad zapíše priamo pri prvku pomocou malých úžitkových tried. Hodnoty pritom nie sú náhodné: farby, rozostupy, veľkosti písma a zaoblenia sú definované v konfigurácii projektu a slúžia ako dizajnový systém. Do výsledného CSS sa dostane len to, čo sa naozaj používa, takže súbor s pribúdajúcimi stránkami prakticky nerastie.

Prečo štýly patria k prvku, ktorý opisujú

Najväčšia praktická výhoda nie je v písaní, ale v mazaní. Keď zmažete komponent, zmizne s ním aj jeho vzhľad, pretože nikde nezostal osirelý blok CSS, ktorý sa nikto neodváži odstrániť. Zmena tlačidla na jednej stránke sa nemôže preliať na inú, lebo neexistuje globálne pravidlo, ktoré by ich spájalo. Čitateľnosť sa dá udržať tým, že sa opakujúce prvky vytiahnu do komponentov v šablóne. Výsledkom je frontend, v ktorom je zmena predvídateľná a nevyžaduje archeológiu v starom CSS.

Zmazaním komponentu zmizne aj jeho CSS
Žiadne globálne pravidlá, ktoré sa navzájom prebíjajú
Zmena má viditeľný a ohraničený dosah
Opakujúce sa prvky sa riešia komponentom, nie kopírovaním

Dizajnový systém v konfigurácii, nie v hlave

V konfigurácii projektu sa definuje paleta farieb, škála rozostupov, typografia, zaoblenia a tiene. Od toho momentu má projekt jediný zdroj pravdy pre vzhľad a nie je možné, aby na piatej stránke vznikol odtieň modrej, ktorý sa o kúsok líši od značkovej. Ak sa firemná identita zmení, upraví sa konfigurácia a zmena prejde celým webom. Rovnaké premenné sa dajú použiť aj pre tmavý režim a pre stavy komponentov, takže dizajn nie je súbor obrázkov, ale skutočný systém.

Farby, rozostupy a typografia na jednom mieste
Žiadne náhodné odtiene a rozmery navyše
Zmena identity sa premietne do celého webu
Pripravené na tmavý režim a stavy komponentov

Konzistentné komponenty naprieč stránkami

Z dizajnového systému postavím sadu komponentov, ktorú web reálne používa: tlačidlá vo variantoch, formulárové polia so stavmi chyby, karty, tabuľky, upozornenia, navigáciu a pätu. Nová stránka sa potom skladá z hotových dielov a nevzniká pri každom zadaní nový vzhľad tlačidla. To sa priamo prejaví na cene, pretože väčšina úprav je použitie existujúceho komponentu, nie kreslenie od začiatku. Zároveň je pri odovzdaní jasné, čo je stavebný prvok a čo je jednorazová výnimka.

Tlačidlá, polia, karty a upozornenia v jednej sade
Nové stránky sa skladajú, nie kreslia odznova
Stavy chyby, načítania a prázdneho zoznamu premyslené
Menej hodín na každé ďalšie zadanie

Tailwind so Sage, Alpine aj Reactom

Tailwind nie je viazaný na jeden framework, čo je pri dlhodobom projekte podstatné. V WordPress téme na Sage sa píše priamo v Blade komponentoch, s Alpine sa triedy prepínajú podľa stavu prvku a v React aplikácii sa používajú rovnako. Ak sa projekt raz presunie z WordPressu na inú platformu, dizajnový systém a väčšina značkovania prejdú s ním. Nevzniká tým závislosť na jednom dodávateľovi ani na jednom nástroji, čo je pri frontende častejší problém, než sa čaká.

Blade komponenty v Sage témach
Prepínanie tried stavom cez AlpineJS
Rovnaký zápis v React aplikáciách
Dizajnový systém prežije zmenu platformy

Výkon, veľkosť CSS a cena

Pri zostavení sa do výsledného súboru dostanú iba triedy, ktoré sa v projekte naozaj používajú. Bežný web tak má CSS v desiatkach kilobajtov namiesto stoviek, čo sa priamo prejaví na Core Web Vitals a na správaní webu na mobilnom pripojení. Rozdiel je najviditeľnejší pri weboch, ktoré predtým bežali na univerzálnej téme s načítaním štýlov pre všetky možné funkcie. Pracujem za 40 € za hodinu vrátane DPH, príprava dizajnového systému a základnej sady komponentov býva 8 až 20 hodín.

Do CSS sa dostane len to, čo sa používa
Desiatky kilobajtov namiesto stoviek
Merateľný dopad na Core Web Vitals
Dizajnový systém orientačne 8 až 20 hodín, 40 € za hodinu vrátane DPH

Časté otázky o Tailwind CSS

Nie je HTML s množstvom tried neprehľadné?

Na prvý pohľad pôsobí nezvyčajne, no opakujúce sa prvky sa vyťahujú do komponentov, takže dlhý zoznam tried je v projekte na jednom mieste. Výmenou za to viete pri každom prvku hneď, ako vyzerá, bez preskakovania medzi šablónou a CSS súborom.

Dá sa Tailwind nasadiť na existujúci web?

Dá, aj postupne. Tailwind vie fungovať vedľa pôvodného CSS a nové sekcie sa píšu už v ňom. Kompletnú výmenu odporúčam len vtedy, keď sa aj tak prerába vzhľad, inak sa nová a stará vrstva zbytočne prekrývajú.

Zvládne redaktor upraviť obsah na takomto webe?

Áno. Tailwind sa týka šablón, nie obsahu. Redaktor pracuje v administrácii WordPressu alebo v CMS rovnako ako predtým a texty, obrázky či poradie sekcií mení bez zásahu do kódu.

Je Tailwind vhodný aj pre e-shop?

Je, a často sa vyplatí najviac. E-shop má veľa opakujúcich sa prvkov, ako sú karty produktov, filtre, košík a checkout, ktoré musia vyzerať rovnako. Dizajnový systém udrží konzistenciu aj pri stovkách produktových stránok.

Koľko stojí príprava dizajnového systému?

Základná sada s paletou, typografiou a komponentmi sa orientačne pohybuje v 8 až 20 hodinách, teda 320 až 800 € vrátane DPH pri sadzbe 40 € za hodinu. Rozsah mení počet komponentov, tmavý režim a počet variantov.

Chcete frontend, v ktorom sa zmena nebojí sama seba?

Napíšte mi, na čom web beží a či máte hotový dizajn alebo brand manuál. Navrhnem rozsah dizajnového systému a komponentov, ktoré sa naozaj oplatí pripraviť.

Prebrať frontend