Lekce 1.4

Tailwind CSS: utility-first přístup

Vzhled skládaný z hotových tříd přímo na prvku v HTML.

Utility-first přístup

Při tradičním psaní CSS jsme prvkům přidávali třídy pojmenované podle toho, co prvek představuje – .card, .warning – a v CSS jsme jim nastylovali vzhled. Každá CSS třída tak obvykle obsahuje spoustu vlastností pro daný prvek.

Postupem času se rozvinul a stal populárním jiný přístup, který se obvykle označuje jako utility-first. Ten k problému stylování přistupuje obráceně: připraví si sadu malých pomocných tříd, tzv. utilit, z nichž každá nastavuje v CSS jedinou věc. Vzhled prvku se z těchto pomocných tříd skládá přímo v HTML. K prvku prostě přidáme třídu pro každou vlastnost/hodnotu, kterou mu chceme nastavit.

Utilita je obvykle obyčejné pravidlo s jednou deklarací:

css
.font-bold {
  font-weight: 700;
}

.text-red-700 {
  color: #b91c1c;
}

Prvek pak v HTML dostane tolik utilit, kolik vlastností potřebuje:

html
<p class="text-lg font-bold text-red-700 bg-red-50">Mléko došlo</p>

text-lg zvětší písmo, font-bold ho ztuční, text-red-700 obarví text a bg-red-50 podklad. Nepíšeme už žádné CSS, vzhled prvku vytváříme jen přidáváním tříd. Stejné třídy se dají použít na jakýkoli jiný prvek.

Utility třídy si můžeme napsat ručně vlastní. Častěji ale sáhneme po hotové CSS knihovně pracující na utility-first principu. Nejznámější z nich je Tailwind, se kterým budeme pracovat v celé lekci. Existují samozřejmě ale i další podobné knihovny.

Vlevo klasické CSS: HTML s třídou card a šipka do druhého souboru style.css s pravidly. Vpravo utility-first: totéž HTML s výčtem utility tříd a prázdné místo tam, kde by byl druhý soubor.

Výhody

Co získáme
  • Vzhled je vidět tam, kde je prvek. Odpadá skákání mezi dvěma soubory a hledání, která ze čtyř tříd na prvku vlastně dělá to odsazení.
  • Nevymýšlejí se jména. Jména jsou těžká. Na velkém projektu s velkým množstvím tříd je to utrpení. Pojmenovat něco .card__header__title--small dá nečekaně hodně práce a ještě hrozí, že vymyšlené jméno stejně za půl roku nebude sedět.
  • Styly nenarůstají. Klasického CSS v projektu jen přibývá, protože si nikdo netroufne smazat pravidlo, o kterém neví, kdo ho kde používá. Utilitu mazat nemusíme: když ji přestaneme používat, zmizí z vygenerovaného CSS sama, protože build do něj dává jen třídy, které v projektu najde.
  • Je zajištěná konzistence. p-4 a p-8 se vybírají z připravené řady, takže na webu nevznikne odsazení 13, 15, 16 a 17 pixelů podle toho, kdo ho zrovna psal.

Nevýhody

Co ztratíme
  • HTML je delší a na první pohled ošklivé – atribut class má klidně deset položek a není to snadné a přehledné ke čtení.
  • Opakování. Deset tlačítek znamená desetkrát tentýž dlouhý zápis CSS tříd a každou změnu vzhledu pak děláme desetkrát. To ale platí při manuálním psaní HTML. Řešením jsou komponenty, kterým se budeme věnovat, až dojdeme k psaní aplikací v Reactu. Pak nevýhoda mizí, protože komponentu nastylujeme jenom jednou a pak ji opakovaně používáme.
  • Nutný krok sestavení CSS (build). Tailwind musí projít soubory projektu a vyrobit z nich hotové CSS, takže k práci patří spuštěný nástroj na pozadí.

Proč je Tailwind oblíbený

Mohlo by se zdát, že Tailwind má spoustu vážných nevýhod. Někdo tento přístup psaní CSS vyloženě nesnáší a raději používá klasický přístup. To je úplně v pořádku.

Tailwind se ale dnes v inzerátech na frontendové pozice objevuje častěji než kterákoli jiná knihovna na styly, hlavně proto, že dobře funguje ve větším týmu. Když si každý píše vlastní CSS, mají čtyři lidi po půl roce čtyři různé sady tříd a nikdo nesmí sáhnout do cizí. Junior, který se přidá do týmu, je zcela ztracený. Využívá-li však projekt Tailwind, všichni používají stejné třídy a všichni se v nich vyznají. I úplní nováčci.

Tailwind také milují AI agenti. Pokud požádáte Claude nebo Codex, aby vám napsali webovou aplikaci v Reactu, s vysokou pravděpodobností použijí pro stylování Tailwind.

Vždycky správná volba to přesto není. Hodně také záleží na vašich osobních preferencích.