Cell je knihovna, kterou jsem vyvinul pro pomoc se stylováním komponent uživatelského rozhraní pomocí Sass. Tento článek bude krátkým úvodem do několika konceptů, které by vám (pokud znáte Sass) měly připadat známé. Tyto koncepty se nazývají Cell Atoms a Cell Molecules.
Atom Cell je jedna vlastnost CSS, která vypisuje dvě různé hodnoty, které budou aplikovány na prvek na základě nějakého předaného kontextu. V tomto případě může kontext znamenat například přítomnost určitých modifikátorů/pseudostav nebo to, zda je prvek/nějaký nadřazený prvek najetý, atd. To je většinou užitečné při přepínání vlastností na základě nějaké události nebo interakce.
Příkladem může být použití vlastnosti display pro skrytí/zobrazení prvku. To, zda je hodnota vlastnosti display none nebo něco jako block, bude záviset na daném kontextu nebo podmínce. V prostém jazyce Sass by to mohlo vypadat například takto:
… což by zobrazilo prvek, pokud má třídu active. Pokud bychom místo toho chtěli zobrazit prvek, když má konkrétní rodič třídu active, mohlo by to vypadat nějak takto:
Tento příklad můžeme reprezentovat pomocí některého API CSS-in-JS, což by mohlo vypadat nějak takto:
…zde vidíme, jak v příkladu v jazyce JavaScript definujeme pouze jednu vlastnost display, přičemž hodnota je dynamická. Tato hodnota by se znovu vyhodnotila při každé změně objektu context, přičemž element by se podle toho překreslil.
V příkladu Sass vzhledem ke kaskádové povaze CSS (a nedostatku dynamiky) definujeme více vlastností display kaskádovým způsobem a zbytek necháme na souboji specifičnosti. Protože Sass má funkce, mohli bychom si myslet, že to obejdeme vytvořením vlastní funkce context, která by napodobovala chování CSS-in-JS, něco jako:
To by však nikdy nemohlo fungovat – to by se vždy mohlo zkompilovat pouze do jediného pravidla CSS (s použitím jakékoli hodnoty vyhodnocené v době kompilace). Sass by mohl vyhodnotit context('.someParent.active', block, none) pouze jednou před odesláním klientovi, a tedy vytvořit pouze jedno pravidlo CSS; zatímco JavaScript by mohl vyhodnotit context.someParent.active ? 'block' : 'none' za běhu.
Nejlépe bychom udělali, kdybychom měli pro každou vlastnost, která nás zajímá, samostatné Mixiny. Tento Mixin by se nazýval Cell Atom. Pokud bychom použili Cell a display Atom, výše uvedený příklad bychom mohli zredukovat na:
… což, jak vidíte, je nyní velmi podobné verzi CSS-in-JS, takže nám zbývá méně kódu, který je stejně čitelný. To by nyní mohlo pod kapotou vypisovat libovolný počet vlastností CSS v libovolném počtu pravidel. Výše uvedený kód by byl syntaktickým cukrem pro:
… a skutečně, každá instance atomu buňky by byla pod kapotou reprezentována podobným způsobem jako výše (s tím, že kontext, který je předán atomu, je předán dolů do context Mixin).
Tento koncept je užitečný pro určité případy, kdy specifické kontexty vyžadují úpravu pouze jedné vlastnosti CSS, přičemž příklad hide/show je nejčastějším případem použití, který mě napadl. Pokud byste potřebovali na prvek aplikovat více vlastností CSS na základě nějakého předaného kontextu/podmínky, měli byste použít context Mixin.
Možná si ovšem říkáte, že mít pro každou vlastnost samostatné Mixiny je přehnané, a měli byste pravdu, vzhledem k tomu, že existuje asi tak 800 vlastností CSS? Nicméně většina vlastností CSS by se takto používat neměla – pouze vlastnosti, které ovlivňují rozvržení/funkčnost (a i v tomto případě pouze tehdy, když jednotlivá vlastnost řídí jediné chování, například skrýt/zobrazit). Cell jako takový v současné době obsahuje pouze atomy pro vlastnosti display, position a visibility.
Molekuly Cell
Molekula Cell je v podstatě jen běžný mixin Sass, který na základě nějakého předaného kontextu/podmínky vypisuje jedno nebo více pravidel CSS, aby dosáhl jednoho konkrétního výsledku. Cílem je abstrahovat opakující se vzory do složitelných Mixinů a zlepšit tak přehlednost a udržovatelnost vaší kódové základny Sass. Při použití (volání) Cell Molecules se na rozdíl od Cell Atoms nepředávají žádné vlastnosti ani hodnoty CSS.
Je to v principu docela podobné knihovně Bourbon Sass (s tím rozdílem, že Cell Molecule přijímá vstupní kontext a vyprodukuje více kontextově řízených pravidel). Vezmeme-li předchozí příklad hide/show, lze jej abstrahovat do molekuly Cell a použít takto:
… v podstatě říkáme Cell „Skryj tento prvek, pokud není splněna předaná podmínka, v tom případě jej zobraz“. Požadovanou funkčnost (tj. použití hodnot none nebo block) by pod kapotou řešil hypotetický show Mixin. Výše uvedené by bylo syntaktickým cukrem pro:
… ekvivalentní (v principu) tomuto dřívějšímu příkladu vanilla Sass, který jsme viděli:
Neexistuje žádný skutečně pevně stanovený způsob, jak kvalifikovat nějakou sadu CSS jako Molekuly buněk; může to být jakýkoli abstraktní a opakující se vzor, který vyžaduje výchozí stav, který se mění na základě nějakého kontextu.
Buněčné molekuly jsou pouze filozofií/konceptem; v současné době neexistuje žádná knihovna Buněčných molekul ani nic jiného
Závěr
Ačkoli Atomy buněk a Molekuly slouží různým účelům, konečným cílem obou je udržet styly více složitelné. Používáním buňky Cell a identifikací atomů a molekul ve vaší kódové základně (nebo jejich předvídáním/předpokládáním, pokud vytváříte nový projekt/funkci) můžete zajistit, že vaše kódová základna bude stručnější a sémantičtější a méně zaplevelená různými vlastnostmi CSS, které budou nepochybně plácány bez skutečného pořadí.
Podíváme-li se na různé příklady z tohoto článku vedle sebe, můžeme lépe pochopit motivaci těchto konceptů (nezapomeňte, že všechny tyto příklady dosahují téhož):
V mnoha případech byste museli zvážit, zda je potřeba pro něco vytvořit molekulu – ve výše uvedeném příkladu, kdy molekula ovlivňuje pouze jednu vlastnost CSS, může být pragmatičtější zůstat u použití atomu display.