Cell er et bibliotek, som jeg har udviklet til at hjælpe med styling af brugergrænsefladekomponenter ved hjælp af Sass. Denne artikel vil være en kort introduktion til et par koncepter, der (hvis du er bekendt med Sass) bør føles bekendt. Disse koncepter kaldes Cell Atoms og Cell Molecules.
Et Cell Atom er en enkelt CSS-egenskab, der udsender to forskellige værdier, der vil blive anvendt på et element baseret på en eller anden overdraget kontekst. I dette tilfælde kan konteksten betyde ting som tilstedeværelsen af visse modifikatorer/pseudotilstande, eller om elementet/et overordnet element er svævet eller ej osv. Dette er især nyttigt, når man skifter egenskaber baseret på en begivenhed eller interaktion.
Et eksempel kunne være at bruge display-egenskaben til at skjule/vise et element. Om værdien af display-egenskaben er none eller noget i retning af block afhænger af den pågældende kontekst eller tilstand. I almindelig Sass kunne det se ud som:
… hvilket ville vise elementet, når det har klassen active. Hvis vi i stedet ville vise elementet, når en bestemt forælder havde active-klassen, kunne det se ud som:
Vi kan repræsentere dette eksempel ved hjælp af en CSS-in-JS API, som kunne se ud som:
:
… her kan vi se, hvordan vi i JavaScript-eksemplet blot definerer en display-egenskab, hvor værdien er dynamisk. Denne værdi vil blive revurderet, hver gang context-objektet ændres, og elementet vil blive malet på ny i overensstemmelse hermed.
I Sass-eksemplet definerer vi i betragtning af CSS’ kaskadeagtige karakter (og manglen på dynamik) flere display-egenskaber på en kaskadeagtig måde og lader slaget om specificitet bestemme resten. Da Sass har funktioner, kunne vi tænke os at omgå dette ved at oprette en brugerdefineret context-funktion for at efterligne CSS-in-JS-opførslen, noget i retning af:
Dette kunne dog aldrig fungere – det kunne altid kun kompileres til en enkelt CSS-regel (ved hjælp af den værdi, der evalueres på kompileringstidspunktet). Sass kunne evaluere context('.someParent.active', block, none) kun én gang, før det sendes til klienten, og dermed kun oprette en enkelt CSS-regel; hvorimod JavaScript kunne evaluere context.someParent.active ? 'block' : 'none' undervejs.
Det bedste, vi kunne gøre, ville være at have separate mixins for hver egenskab af interesse. Denne Mixin ville være kendt som en Cell Atom. Hvis vi bruger Brug af Cell og display Atom, kunne ovenstående eksempel reduceres til:
…hvilket som du kan se nu er meget lig CSS-in-JS versionen, hvilket efterlader os med mindre kode, der er lige så læsbar. Dette kunne nu, under-the-hood, outputte lige så mange CSS egenskaber i lige så mange regler vi vil. Ovenstående kode ville være syntaktisk sukker for:
… og faktisk ville hver forekomst af en Cell Atom blive repræsenteret under-the-hood på samme måde som ovenfor (med den kontekst, der overføres til Atom, der videresendes ned til context Mixin).
Dette koncept er nyttigt i visse tilfælde, hvor specifikke kontekster kræver, at blot en enkelt CSS-egenskab skal ændres, hvor hide/show-eksemplet er det mest almindelige anvendelsestilfælde, jeg kunne komme i tanke om. Hvis du havde brug for at anvende flere CSS-egenskaber på et element baseret på en overført kontekst/betingelse, skulle du bruge context Mixin.
Du tænker måske, at det er overkill at have separate Mixins for hver egenskab, og det ville du have ret i, eftersom der er omkring 800 CSS-egenskaber? Men de fleste CSS-egenskaber bør ikke bruges på denne måde – kun egenskaber, der påvirker layoutet/funktionaliteten (og selv da, kun når den enkelte egenskab styrer en enkelt adfærd, såsom hide/show). Derfor leveres Cell i øjeblikket kun med Atoms til display, position og visibility egenskaber.
Cell Molecules
Et Cell Molecule er i bund og grund bare en almindelig Sass Mixin, der udsender en eller flere CSS-regler baseret på en overført kontekst/betingelse for at opnå et enkelt specifikt resultat. Målet er at abstrahere tilbagevendende mønstre til sammensætelige Mixins, hvilket forbedrer klarheden og vedligeholdbarheden af din Sass-kodebase. Der overføres ingen CSS-egenskaber eller -værdier, når man bruger (kalder) Cell Molecules, i modsætning til Cell Atoms.
Dette ligner i princippet Bourbon Sass-biblioteket (forskellen er, at et Cell Molecule tager et kontekstinput og vil output flere kontekstdrevne regler). Hvis vi tager det tidligere hide/show eksempel, kunne dette abstraheres til et Cell Molecule og bruges på følgende måde:
…i bund og grund fortælle Cell “Skjul dette element, medmindre den overgivne betingelse er opfyldt, i hvilket tilfælde det skal vises”. Den nødvendige funktionalitet (dvs. anvendelse af none– eller block-værdier) ville blive håndteret under motorhjelmen af den hypotetiske show-mixin. Ovenstående ville være syntaktisk sukker for:
… svarende (i princippet) til dette tidligere vanilla Sass-eksempel, som vi så:
Der er ingen rigtig hård måde at kvalificere et CSS-sæt som et Cell Molecule på; det kan være ethvert abstrakt og tilbagevendende mønster, der kræver en standardtilstand, som ændrer sig baseret på en eller anden kontekst.
Cellemolekyler er blot en filosofi/et begreb; der er i øjeblikket ikke noget Cell Molecules-bibliotek eller noget
Konklusion
Mens Cell Atoms og Molecules tjener forskellige formål, er det ultimative mål for begge at holde stilarter mere sammensætningsvenlige. Ved at bruge Cell og identificere Atoms og Molecules i din kodebase (eller forudsige/forudse dem, hvis du opretter et nyt projekt/en ny funktion) kan du sikre, at din kodebase er mere kortfattet og semantisk og mindre gennemsyret af forskellige CSS-egenskaber, som uden tvivl vil blive sat på uden nogen reel rækkefølge.
Ved at se på de forskellige eksempler fra denne artikel side om side kan vi få en bedre forståelse af motiverne bag disse koncepter (husk at alle disse eksempler opnår det samme):
I mange tilfælde vil du skulle overveje, om der er behov for at oprette et Molecule til noget – i ovenstående eksempel, hvor Molecule kun påvirker en enkelt CSS-egenskab, er det måske mere pragmatisk at holde sig til at bruge display Atom.