Prakticky jsem se v nich pořádně povrtal až v robotích vnitřnostech. Martin systém v článku nazývá ještě jako „atomický“, ale to se mi plete s atomickým designem Brada Frosta, což je zase něco jiného. Takže tomu pojďme říkat dnes již ustálenějším výrazem utility CSS.
Pokud si teď nejste jistí, o čem teda píšu, hezkypěkně to ukazuje Tailwind:
Tuto jsou utility třídy, víc vysvětlovat netřeba
Jako každá jiná technikálie i tahle přitahuje spoustu čistě teoretických názorů, že to je celý špatně. Přístup dostává čoudy hlavně kvůli nafukování HTML, v praxi to ale dělá kód nejen čitelnějším. Praktických výhod, které nemusí být na první pohled zjevné, je mnohem víc. Obzvlášť proto, že podobu často navrhuju až při kódování.
Cesta od představy k prototypu je mnohem rychlejší. Odpadá spousta mikrorozhodnutí od názvů tříd po předvídání rozdílných míst, ve kterých bude třeba komponentu zobrazit. Iterování je díky nastaveným mantinelům taky svižnější. Rozdíl mezi rychlým rozhodnutím padding-1 / 2 / 3 / 4 / 5 nebo neohraničeným padding: 0px / ∞px je radikální.
Zároveň (mentálně) nepřepínám mezi HTML a CSS, abych si tady překopal strukturu a jinde následně přepsal logiku třídy. Styly vnímám v mnohem bližším kontextu k prvkům, na které je píšu přímo.
Respektive styly už vlastně vůbec nepíšu. 🥲 I když je do CSS pořád možné skočit, je natolik upozaděné, že k tomu nesvádí a bohatě stačí předem připravené třídy. Samozřejmě za pomoci VSCode nápovědy, přičemž Tailwind má své vlastní čupr rozšíření.
A s trochou cviku přímo z jednoho zdrojáku vyčtu, jak komponenta vypadá. Problém specificity a dědičnosti v podstatě odpadl, takže ani DevTools už moc nenavštěvuju.
Utility třídy jsou v podstatě vanilla CSS, takže není třeba nasávat projektové zvyklosti kolem pojmenování a stačí mít v malíku jednotlivé CSS vlastnosti. Bylo proto mnohem snazší naskočit do rozjetého 🤖 systému a přenositelnost na další projekty je díky abstrahovanému přístupu lepší:
It’s all about lego bits. Because I never needed to re‑contextualize my understanding of lego blocks. I could use them across ‚projects‘ and they were always the same. I dream of this world in front-end development.