A Cell egy általam fejlesztett könyvtár, amely a Sass használatával segíti a felhasználói felület komponensek formázását. Ez a cikk egy rövid bevezetés lesz néhány olyan fogalomba, amelyeket (ha ismered a Sass-t) ismerősnek kell érezned. Ezeket a fogalmakat Cell atomoknak és Cell molekuláknak hívják.
A Cell Atom egyetlen CSS tulajdonság, amely két különböző értéket ad ki, amelyeket egy elemre fog alkalmazni valamilyen átadott kontextus alapján. Ebben az esetben a kontextus olyan dolgokat jelenthet, mint például bizonyos módosítók/pszeudo-állapotok jelenléte, vagy hogy az elem/egy szülőelem lebeg-e vagy sem stb. Ez leginkább akkor hasznos, ha a tulajdonságokat valamilyen esemény vagy interakció alapján váltogatjuk.
Egy példa lehet a display tulajdonság használata egy elem elrejtésére/megjelenítésére. Az, hogy a display tulajdonság értéke none vagy valami block, a kérdéses kontextustól vagy feltételtől függ. Sima Sass nyelven ez valahogy így nézhetne ki:
…ami megmutatná az elemet, ha az active osztályú. Ha az elemet akkor akarnánk megjeleníteni, amikor egy adott szülőnek van active osztálya helyette, akkor ez valahogy így nézne ki:
Ezt a példát valamilyen CSS-in-JS API segítségével ábrázolhatjuk, ami valahogy így nézhetne ki:
…itt láthatjuk, hogy a JavaScript példában csak egy display tulajdonságot definiálunk, amelynek értéke dinamikus. Ez az érték minden alkalommal újraértékelődne, amikor a context objektum változik, és az elemet ennek megfelelően átfestjük.
A Sass példában, tekintettel a CSS kaszkád jellegére (és a dinamizmus hiányára), több display tulajdonságot definiálunk kaszkádszerűen, és hagyjuk, hogy a specifikusság harca határozza meg a többit. Mivel a Sass rendelkezik függvényekkel, úgy gondolhatnánk, hogy ezt megkerülhetjük egy saját context függvény létrehozásával, hogy utánozzuk a CSS-in-JS viselkedését, például:
Ez azonban soha nem működhetne – ez mindig csak egyetlen CSS-szabályt fordíthatna le (a fordításkor kiértékelt értéket használva). A Sass csak egyszer tudná kiértékelni a context('.someParent.active', block, none) értéket, mielőtt elküldi a kliensnek, és így csak egyetlen CSS-szabályt hozna létre; míg a JavaScript menet közben ki tudná értékelni a context.someParent.active ? 'block' : 'none' értéket.
A legjobb, amit tehetünk, hogy külön Mixineket készítünk minden egyes érdekes tulajdonsághoz. Ezt a Mixint Cell Atomnak neveznénk. A Cell és a display Atom használata esetén a fenti példát le lehetne redukálni:
…ami, mint látható, már nagyon hasonlít a CSS-in-JS verzióhoz, így kevesebb, de ugyanolyan jól olvasható kódot kapunk. Ez most, a motorháztető alatt, bármennyi CSS-tulajdonságot adhat ki bármennyi szabályban, amennyit csak akarunk. A fenti kód szintaktikai cukor lenne:
…és valóban, egy Cell Atom minden példánya a motorháztető alatt a fentihez hasonló módon lenne reprezentálva (azzal, hogy az Atomnak átadott kontextust továbbítjuk a context Mixin felé).
Ez a koncepció hasznos bizonyos esetekben, amikor bizonyos kontextusok csak egyetlen CSS tulajdonság módosítását igénylik, a hide/show példa a leggyakoribb felhasználási eset, amire gondolni tudok. Ha több CSS tulajdonságot kellene egy elemre alkalmazni valamilyen átadott kontextus/feltétel alapján, akkor a context Mixin-t kellene használnod.
Azt gondolhatod persze, hogy minden tulajdonsághoz külön Mixin-t használni túlzás, és igazad lenne, tekintve, hogy van vagy 800 CSS tulajdonság? A legtöbb CSS tulajdonságot azonban nem szabad így használni – csak azokat a tulajdonságokat, amelyek az elrendezést/funkcionalitást befolyásolják (és még akkor is csak akkor, ha az egyes tulajdonság egyetlen viselkedést vezérel, például a hide/show-t). Így a Cell jelenleg csak a display, position és visibility tulajdonságok atomjaival rendelkezik.
Cell Molecules
A Cell Molecule lényegében csak egy hagyományos Sass Mixin, amely egy vagy több CSS szabályt ad ki valamilyen átadott kontextus/feltétel alapján, hogy elérjen egy adott eredményt. A cél az, hogy az ismétlődő mintákat összeállítható Mixinekké absztraháljuk, ezzel javítva a Sass kódbázis áttekinthetőségét és karbantarthatóságát. A Cell Molecules használatakor (hívásakor) a Cell Atoms-tól eltérően nem kell CSS tulajdonságokat vagy értékeket átadni.
Ez elvileg nagyon hasonló a Bourbon Sass könyvtárhoz (a különbség az, hogy a Cell Molecule egy kontextus bemenetet fogad el, és több kontextusfüggő szabályt ad ki). Az előző hide/show példát véve, ez absztrahálható Cell molekulává, és így használható:
…lényegében azt mondja a Cellnek, hogy “Rejtsd el ezt az elemet, kivéve, ha az átadott feltétel teljesül, ebben az esetben mutasd meg”. A szükséges funkciókat (azaz a none vagy block értékek alkalmazását) a feltételezett show Mixin kezelné a motorháztető alatt. A fentiek szintaktikai cukrot jelentenének:
…ami (elvileg) megegyezik a korábban látott vanilla Sass példával:
Nincs igazán keményen meghatározott módja annak, hogy valamilyen CSS-készletet Cell Molecule-nak minősítsünk; ez lehet bármilyen absztrakt és visszatérő minta, amely egy alapértelmezett állapotot igényel, amely valamilyen kontextus alapján változik.
A sejtmolekulák csak egy filozófia/fogalom; jelenleg nincs Cell Molecules könyvtár vagy bármi más
Következtetés
Míg a Cell atomok és a Molecules különböző célokat szolgálnak, mindkettő végső célja, hogy a stílusok jobban összeállíthatóak legyenek. A Cell használatával és az atomok és molekulák azonosításával a kódbázisodban (vagy ezek előrejelzésével/előrejelzésével, ha új projektet/funkciót hozol létre) biztosíthatod, hogy a kódbázisod tömörebb és szemantikusabb legyen, és kevésbé legyen tele különböző CSS tulajdonságokkal, amelyeket kétségtelenül mindenféle sorrend nélkül fogsz felrakni.
A cikk különböző példáit egymás mellett megnézve jobban megérthetjük a koncepciók mögötti motivációkat (ne feledjük, hogy mindegyik példa ugyanazt éri el):
Sok esetben meg kell fontolnunk, hogy szükség van-e egy Molekula létrehozására valamihez – a fenti példában, ahol a Molekula csak egyetlen CSS tulajdonságot érint, pragmatikusabb lehet, ha maradunk a display Atom használatánál.