Cell är ett bibliotek som jag har utvecklat för att hjälpa till med att styla användargränssnittskomponenter med hjälp av Sass. Den här artikeln kommer att vara en kort introduktion till ett par begrepp som (om du är bekant med Sass) borde kännas bekanta. Dessa koncept kallas Cell Atoms och Cell Molecules.
En Cell Atom är en enskild CSS-egenskap som ger ut två olika värden som kommer att appliceras på ett element baserat på någon passerad kontext. I det här fallet kan sammanhanget betyda saker som närvaron av vissa modifieringar/pseudotillstånd, eller om elementet/ett överordnat element är svävande eller inte osv. Detta är mest användbart när man växlar egenskaper baserat på någon händelse eller interaktion.
Ett exempel kan vara att använda egenskapen display för att dölja/visa ett element. Huruvida värdet för egenskapen display är none eller något liknande block beror på sammanhanget eller villkoret i fråga. I vanlig Sass kan detta se ut som:
…vilket skulle visa elementet när det har klassen active. Om vi i stället vill visa elementet när en specifik överordnade har klassen active kan det se ut som:
Vi kan representera det här exemplet med hjälp av ett CSS-in-JS API, vilket kan se ut som:
…Här kan vi se hur vi i JavaScript-exemplet bara definierar en display-egenskap, vars värde är dynamiskt. Detta värde skulle omvärderas varje gång context-objektet ändras, och elementet målas om i enlighet med detta.
I Sass-exemplet definierar vi, med tanke på CSS:s kaskadnatur (och bristen på dynamik), flera display-egenskaper i kaskadform, och låter slaget om specificitet avgöra resten. Eftersom Sass har funktioner skulle vi kunna tänka oss att kringgå detta genom att skapa en egen context-funktion för att efterlikna CSS-in-JS beteende, något i stil med:
Detta skulle dock aldrig kunna fungera – detta skulle bara kunna kompileras till en enda CSS-regel (med hjälp av vilket värde som helst som utvärderas vid kompileringstillfället). Sass kan utvärdera context('.someParent.active', block, none) bara en gång innan det skickas till klienten och därmed bara skapa en enda CSS-regel, medan JavaScript kan utvärdera context.someParent.active ? 'block' : 'none' i farten.
Det bästa vi kan göra är att ha separata Mixins för varje intressant egenskap. Denna mixin skulle kallas Cell Atom. Om man använder Using Cell och display Atom skulle ovanstående exempel kunna reduceras till:
…vilket som du kan se nu är väldigt likt CSS-in-JS versionen, vilket ger oss mindre kod som är lika läsbar. Detta kan nu, under huven, ge ut hur många CSS-egenskaper som helst i hur många regler som helst som vi vill. Ovanstående kod skulle vara syntaktisk socker för:
…och faktiskt skulle varje instans av en Cell Atom representeras under huven på ett liknande sätt som ovan (med kontexten som skickas till Atom som vidarebefordras ner till context Mixin).
Det här konceptet är användbart i vissa fall där specifika sammanhang kräver att bara en enda CSS-egenskap ska ändras, där hide/show-exemplet är det vanligaste användningsfallet som jag kan komma på. Om du behöver tillämpa flera CSS-egenskaper på ett element baserat på en övergiven kontext/villkor bör du använda context Mixin.
Självklart kan du tänka att det är överdrivet att ha separata Mixins för varje egenskap, och du skulle ha rätt, med tanke på att det finns, vad, typ 800 CSS-egenskaper? De flesta CSS-egenskaper bör dock inte användas på detta sätt – endast egenskaper som påverkar layouten/funktionaliteten (och även då endast när den enskilda egenskapen kontrollerar ett enda beteende, t.ex. hide/show). Cell har därför för närvarande bara Atoms för display, position och visibility egenskaper.
Cell Molecules
En Cell Molecule är i princip bara en vanlig Sass Mixin som matar ut en eller flera CSS-regler baserade på en viss överlåten kontext/villkor för att uppnå ett enda specifikt resultat. Målet är att abstrahera återkommande mönster till komponerbara Mixins, vilket förbättrar tydligheten och underhållbarheten i din Sass-kodbas. Inga CSS-egenskaper eller -värden överförs när man använder (anropar) Cell Molecules, till skillnad från Cell Atoms.
Detta är i princip ganska likt Bourbon Sass-biblioteket (skillnaden är att en Cell Molecule tar emot en kontextinmatning och kommer att ge ut flera kontextstyrda regler). Om vi tar det tidigare hide/show-exemplet kan detta abstraheras till en Cell Molecule och användas på följande sätt:
…i princip för att tala om för Cell att ”dölja det här elementet såvida inte det överlämnade villkoret är uppfyllt, i så fall visa det”. Den funktionalitet som krävs (dvs. tillämpning av none– eller block-värden) skulle hanteras under huven av den hypotetiska show-mixin-modulen. Ovanstående skulle vara syntaktisk socker för:
…motsvarande (i princip) det tidigare vanilla Sass-exemplet som vi såg:
Det finns inget riktigt fast sätt att kvalificera en CSS-uppsättning som en Cell Molecule; det kan vara vilket abstrakt och återkommande mönster som helst som kräver ett standardtillstånd som förändras baserat på ett sammanhang.
Cellmolekyler är bara en filosofi/ett koncept; Det finns för närvarande inget Cell Molecules-bibliotek eller något
Slutsats
Med tanke på att Cell Atoms och Molecules tjänar olika syften, så är det yttersta målet för båda att hålla stilar mer komponerbara. Genom att använda Cell och identifiera Atoms och Molecules i din kodbas (eller förutsäga/förutse dem om du skapar ett nytt projekt/en ny funktion) kan du se till att din kodbas blir mer kortfattad och semantisk, och mindre genomsyrad av olika CSS-egenskaper som utan tvekan kommer att läggas på utan någon egentlig ordning.
Om vi tittar på de olika exemplen från den här artikeln sida vid sida kan vi få en bättre förståelse för motiveringarna bakom dessa koncept (kom ihåg att alla dessa exempel uppnår samma sak):
I många fall måste du överväga om det finns ett behov av att skapa en Molecule för något – i exemplet ovan, där Molecule endast påverkar en enda CSS-egenskap kan det vara mer pragmatiskt att hålla sig till att använda display Atom.