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:
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.