Atomic Design a Element Queries, cesta do ráje
Kodéři! Pojďme si povzdychnout nad tím, jak těžké je při tvorbě webu psát kód ideálním a udržitelným způsobem. Ať už BEM, OOCSS či SMACSS v kombinaci s libovolným třízením souborů se styly, jistě jste si někdy říkali: “Dělám to takhle dobře?” nebo “Tohle není ideální, ale jinak to prostě asi nejde/zabralo by už moc času to předělat.” A v hlavě si spřádáte nápady, jak by to šlo udělat lépe, kdyby šlo tohle a tohle… A já se s vámi podělím o to, co si takhle říkám; svou vizi ideálního psaní stylů, kterou již dnes můžu z půlky aplikovat…
Atomic Design (ta reálná půlka)
Je to téměř rok, co jsme dokončili projekt tvorba webových stránek ČT Sport. Rozšířili jsme systém zvaný Patternlab, který má Česká televize psaný pomocí logiky Atomic Designu. To je systém třízení souborů CSS (resp. LESSu, SASSu apod.), který jsem si velmi oblíbil, a ve více či méně zjednodušené variantě ho nyní používáme na všech projektech. Ve zkratce:
Z atomů se tvoří molekuly, z těch organismy a z těch templaty, z nich pages. Atomy mohou být například tlačítka, odkazy, logo, dropdown, input atd. Molekuly mohou být menu (atomy odkaz a dropdown), vyhledávání (atomy input, tlačítko), produkt (atom obrázek, nadpis a popis) atd. Organismus může být hlavička (molekuly menu, vyhledávání, atom logo) nebo např. výpis produktů (více molekul produkt pohromadě). Templata už je vše dohromady rozmístěné tak, abychom měli hotovou stránku bez reálného obsahu. Takže např. organismus hlavička, výpis produktů a patička. A pages už jsou naplněné templates konkrétním obsahem, čímž se uzavírá tvorba webu. Ale… více vám asi řekne obrázek po straně.
A k čemu to je? Přináší nám to nejen přehlednou dokumentaci kódu, ale i přehled UI komponent. Atomic Design neslouží tedy jen pro vývojáře, ale i pro grafiky. Brání vzniku 5 různých vzhledů formulářů, protože na jednom místě vidíme, že textová pole, tlačítka a nadpisy již mají svůj vzhled definovaný.
Element Queries (ta zatím nereálná půlka)
Media Queries jsou nesmysl. Možná už to víte, možná vás teprve čeká rozsáhlejší tvorba webových stránek, při které to zjistíte. Málokdy totiž doopravdy potřebujete upravit komponentu webu vzhledem k šířce okna/displeje. Vždy jde spíš o kontext a o šířku nějakého kontejneru, ve kterém komponentu máme. Příklad? Kódujete výpis televizních programů. Všechny programy (molekuly) vypadají stejně (atomy nadpis, popis, obrázek) na straně je nějaký program zvýrazněný (větší obrázek a popis).
Normálně byste to vyřešili přes nějaký modifikátor (např. view-large). Ale co když pak je to větší zobrazení použito na tabletu ve všech případech? Museli byste obsah z classy duplikovat i do Media Queries, ať už přes CTRL+C a CTRL+V nebo přes mírně elegantnější mixin. V každém případě ve výsledném CSS máte duplikovaný kód. A odpovědí jsou Element Queries. Přes ty totiž definujete vzhled elementu vzhledem k jeho šířce, ne vzhledem k šířce okna.
Takže?
Element Queries nás čekají s příchodem CSS4. Neexistuje zatím žádná korektní syntaxe, žádný release date, vše je zatím pouze návrh. Věřím ale, že Element Queries si svou cestu do prohlížečů probijí a jednoho dne bude tvorba webu probíhat zase o něco příjemněji.
