Cell è una libreria che ho sviluppato per aiutare nello styling dei componenti UI usando Sass. Questo articolo sarà una breve introduzione ad un paio di concetti che (se avete familiarità con Sass) dovrebbero esservi familiari. Questi concetti sono chiamati Cell Atoms e Cell Molecules.
Un Cell Atom è una singola proprietà CSS che produce due diversi valori che saranno applicati ad un elemento in base al contesto passato. In questo caso, il contesto potrebbe significare cose come la presenza di certi modificatori/pseudo-stati, o se l’elemento/qualche elemento genitore è passato con il mouse, ecc. Questo è utile soprattutto quando si alternano proprietà basate su qualche evento o interazione.
Un esempio potrebbe essere l’uso della proprietà display per nascondere/mostrare un elemento. Se il valore della proprietà display è none o qualcosa come block dipenderà dal contesto o dalla condizione in questione. In Sass, questo potrebbe sembrare qualcosa come:
…che mostrerebbe l’elemento quando ha la classe active. Se invece volessimo mostrare l’elemento quando un genitore specifico ha la classe active, questo potrebbe apparire come:
Possiamo rappresentare questo esempio usando qualche API CSS-in-JS, che potrebbe apparire come:
…qui possiamo vedere come nell’esempio JavaScript definiamo solo una proprietà display, il cui valore è dinamico. Questo valore verrebbe rivalutato ogni volta che l’oggetto context cambia, e l’elemento verrebbe ridipinto di conseguenza.
Nell’esempio Sass, data la natura a cascata dei CSS (e la mancanza di dinamismo), definiamo più proprietà display in modo a cascata, e lasciamo che la battaglia della specificità determini il resto. Dato che Sass ha delle funzioni, potremmo pensare di aggirare questo creando una funzione context personalizzata per imitare il comportamento CSS-in-JS, qualcosa come:
Tuttavia, questo non potrebbe mai funzionare – questo potrebbe solo compilare una singola regola CSS (usando qualsiasi valore sia valutato al momento della compilazione). Sass potrebbe valutare context('.someParent.active', block, none) solo una volta prima di essere inviato al client, e quindi creare solo una singola regola CSS; mentre JavaScript potrebbe valutare context.someParent.active ? 'block' : 'none' al volo.
Il meglio che potremmo fare sarebbe avere Mixin separati per ogni proprietà di interesse. Questo Mixin sarebbe conosciuto come Cell Atom. Se si utilizzano Cell e l’Atom display, l’esempio precedente potrebbe essere ridotto a:
…che come potete vedere è ora molto simile alla versione CSS-in-JS, lasciandoci con meno codice che è altrettanto leggibile. Questo potrebbe ora, sotto il cofano, produrre quante proprietà CSS in quante regole vogliamo. Il codice di cui sopra sarebbe uno zucchero sintattico per:
…e in effetti, ogni istanza di un Cell Atom sarebbe rappresentata under-the-hood in modo simile a quanto sopra (con il contesto che viene passato all’Atom che viene inoltrato al Mixin context).
Questo concetto è utile per alcuni casi in cui contesti specifici richiedono la modifica di una sola proprietà CSS, con l’esempio hide/show che è il caso d’uso più comune a cui posso pensare. Se avete bisogno di applicare più proprietà CSS ad un elemento in base a qualche contesto/condizione passata, dovreste usare il Mixin context.
Ovviamente, potreste pensare che avere Mixin separati per ogni proprietà è eccessivo, e avreste ragione, dato che ci sono, quante, 800 proprietà CSS? Tuttavia la maggior parte delle proprietà CSS non dovrebbe essere usata in questo modo – solo le proprietà che influenzano il layout/funzionalità (e anche allora, solo quando la singola proprietà controlla un singolo comportamento, come hide/show). Come tale, Cell attualmente ha solo Atomi per le proprietà display, position e visibility.
Molecole Cell
Una Molecola Cell è essenzialmente solo un normale Sass Mixin che produce una o più regole CSS basate su qualche contesto/condizione passata per ottenere un singolo risultato specifico. L’obiettivo è quello di astrarre i pattern ricorrenti in Mixin componibili, migliorando la chiarezza e la manutenibilità del vostro codice Sass. Nessuna proprietà o valore CSS viene passato quando si usano (o si chiamano) Cell Molecules, a differenza di Cell Atoms.
Questo è abbastanza simile in linea di principio alla libreria Bourbon Sass (la differenza è che una Cell Molecule accetta un input di contesto e produce più regole guidate dal contesto). Prendendo l’esempio precedente hide/show, questo potrebbe essere astratto in una Cell Molecule e usato così:
…essenzialmente dicendo a Cell “Nascondi questo elemento a meno che la condizione passata sia soddisfatta, nel qual caso mostralo”. La funzionalità richiesta (cioè l’applicazione dei valori none o block) sarebbe gestita sottobanco dall’ipotetico Mixin show. Quanto sopra sarebbe zucchero sintattico per:
…equivalente (in linea di principio) a questo precedente esempio vanilla Sass che abbiamo visto:
Non c’è un modo veramente duro per qualificare qualche set CSS come una Cell Molecule; può essere qualsiasi schema astratto e ricorrente che richiede uno stato predefinito che cambia in base a qualche contesto.
Le Molecole Cellulari sono solo una filosofia/concetto; non c’è attualmente nessuna libreria Cell Molecules o altro
Conclusione
Mentre Cell Atoms e Molecules hanno scopi diversi, lo scopo finale di entrambi è di mantenere gli stili più componibili. Usando Cell e identificando gli Atomi e le Molecole all’interno della vostra codebase (o prevedendoli/anticipandoli se create un nuovo progetto/funzione) potete assicurarvi che la vostra codebase sia più concisa e semantica, e meno piena di varie proprietà CSS che senza dubbio verranno schiaffate senza un vero ordine.
Guardando i vari esempi di questo articolo fianco a fianco possiamo avere una migliore comprensione delle motivazioni dietro questi concetti (ricordate che tutti questi esempi ottengono lo stesso risultato):
In molti casi dovreste considerare se c’è bisogno di creare una Molecola per qualcosa – nell’esempio precedente dove la Molecola influenza solo una singola proprietà CSS potrebbe essere più pragmatico usare l’Atom display.