Cell is een bibliotheek die ik heb ontwikkeld om te helpen bij het stylen van UI-componenten met behulp van Sass. Dit artikel zal een korte introductie zijn in een paar concepten die (als je bekend bent met Sass) vertrouwd zouden moeten aanvoelen. Deze concepten worden Cell Atoms en Cell Molecules genoemd.
Een Cell Atom is een enkele CSS eigenschap die twee verschillende waarden uitvoert die zullen worden toegepast op een element op basis van een doorgegeven context. In dit geval kan de context dingen betekenen zoals de aanwezigheid van bepaalde modifiers/pseudo-states, of het al dan niet zweven van het element/een parent element, etc. Dit is vooral nuttig bij het omschakelen van eigenschappen op basis van een of andere gebeurtenis of interactie.
Een voorbeeld zou kunnen zijn het gebruik van de display eigenschap om een element te verbergen/tonen. Of de waarde van de display eigenschap none of iets als block is, hangt af van de context of conditie in kwestie. In gewone Sass, zou dit er uit kunnen zien als:
…wat het element zou laten zien als het de active class heeft. Als we het element zouden willen tonen wanneer een specifieke parent de klasse active heeft, zou dit er ongeveer zo uit kunnen zien:
We kunnen dit voorbeeld weergeven met behulp van een CSS-in-JS API, wat er ongeveer zo uit zou kunnen zien:
…hier kunnen we zien hoe we in het JavaScript-voorbeeld slechts één display eigenschap definiëren, waarvan de waarde dynamisch is. Deze waarde zou elke keer dat het context-object verandert, opnieuw worden geëvalueerd, waarbij het element dienovereenkomstig wordt herschilderd.
In het Sass-voorbeeld definiëren we, gezien de cascade-aard van CSS (en het gebrek aan dynamiek), meerdere display-eigenschappen op een cascade-wijze, en laten we de strijd om specificiteit de rest bepalen. Aangezien Sass functies heeft, zouden we kunnen denken om dit te omzeilen door een aangepaste context functie te maken om het CSS-in-JS gedrag na te bootsen, zoiets als:
Dit zou echter nooit kunnen werken – dit zou alleen maar kunnen compileren naar een enkele CSS regel (gebruikmakend van welke waarde dan ook wordt geëvalueerd tijdens het compileren). Sass zou context('.someParent.active', block, none) slechts één keer kunnen evalueren voordat het naar de client wordt verzonden, en dus slechts één CSS regel kunnen maken; terwijl JavaScript context.someParent.active ? 'block' : 'none' tijdens het compileren zou kunnen evalueren.
Het beste wat we kunnen doen is afzonderlijke Mixins hebben voor elke eigenschap die van belang is. Deze Mixin zou bekend staan als een Cell Atom. Als we gebruik maken van Cell en de display Atom, kan het bovenstaande voorbeeld worden teruggebracht tot:
…wat zoals je ziet erg lijkt op de CSS-in-JS versie, waardoor we met minder code zitten die net zo leesbaar is. Dit zou nu, onder de motorkap, zoveel CSS eigenschappen kunnen uitvoeren in zoveel regels als we maar willen. De bovenstaande code zou syntactische suiker zijn voor:
…en inderdaad, elke instantie van een Cell Atom zou onder de motorkap worden weergegeven op een vergelijkbare manier als hierboven (waarbij de context die wordt doorgegeven aan de Atom wordt doorgestuurd naar de context Mixin).
Dit concept is handig voor bepaalde gevallen waarin specifieke contexten vragen om slechts één CSS eigenschap die moet worden gewijzigd, waarbij het hide/show voorbeeld het meest voorkomende gebruiksgeval is dat ik kan bedenken. Als u meerdere CSS eigenschappen op een element moet toepassen op basis van een doorgegeven context/voorwaarde, moet u de context Mixin.
Natuurlijk denkt u misschien dat aparte Mixins voor elke eigenschap overkill is, en u zou gelijk hebben, gezien het feit dat er, wat, zo’n 800 CSS eigenschappen zijn? Maar de meeste CSS eigenschappen zouden niet op deze manier gebruikt moeten worden – alleen eigenschappen die de layout/functionaliteit beïnvloeden (en zelfs dan, alleen als de enkele eigenschap een enkel gedrag controleert, zoals verbergen/tonen). Daarom wordt Cell momenteel geleverd met Atoms voor display, position en visibility eigenschappen.
Cell Molecules
Een Cell Molecule is in wezen gewoon een gewone Sass Mixin die een of meer CSS regels uitvoert op basis van een doorgegeven context/voorwaarde om een enkele specifieke uitkomst te bereiken. Het doel is om terugkerende patronen te abstraheren in samenstelbare Mixins, wat de duidelijkheid en onderhoudbaarheid van uw Sass-codebase verbetert. Er worden geen CSS-eigenschappen of -waarden doorgegeven bij het gebruik van (het aanroepen van) Cell Molecules, in tegenstelling tot Cell Atoms.
Dit is in principe vergelijkbaar met de Bourbon Sass-bibliotheek (het verschil is dat een Cell Molecule een context-input neemt en meerdere context-gedreven regels zal uitvoeren). Als we het vorige hide/show voorbeeld nemen, zou dit kunnen worden geabstraheerd in een Cell Molecule en als volgt kunnen worden gebruikt:
…in wezen wordt Cell verteld “Verberg dit element tenzij aan de doorgegeven voorwaarde wordt voldaan, in welk geval het wordt getoond”. De vereiste functionaliteit (d.w.z. het toepassen van none of block waarden) zou onder de motorkap worden afgehandeld door de hypothetische show Mixin. Het bovenstaande zou syntactische suiker zijn voor:
…equivalent (in principe) aan dit eerdere vanilla Sass-voorbeeld dat we zagen:
Er is geen echt harde manier om een CSS-reeks als een celmolecuul te kwalificeren; het kan elk abstract en terugkerend patroon zijn dat een standaardtoestand vereist die op basis van een bepaalde context verandert.
Celmoleculen zijn slechts een filosofie/concept; er is momenteel geen bibliotheek voor Celmoleculen of wat dan ook
Conclusie
Hoewel Cell Atoms en Molecules verschillende doelen dienen, is het uiteindelijke doel van beide om stijlen meer samenstelbaar te houden. Door Cell te gebruiken en de Atoms en Molecules in je codebase te identificeren (of ze te voorspellen/anticiperen als je een nieuw project/feature maakt) kun je ervoor zorgen dat je codebase beknopter en semantischer is, en minder vol staat met verschillende CSS-eigenschappen die er ongetwijfeld in willekeurige volgorde op worden geplakt.
Als we de verschillende voorbeelden uit dit artikel naast elkaar leggen, kunnen we een beter begrip krijgen van de beweegredenen achter deze concepten (vergeet niet dat al deze voorbeelden hetzelfde bereiken):
In veel gevallen zou je moeten overwegen of het nodig is om ergens een Molecule voor te maken – in het bovenstaande voorbeeld, waar de Molecule slechts een enkele CSS eigenschap beïnvloedt, kan het pragmatischer zijn om het bij het gebruik van de display Atom te houden.