Cell este o bibliotecă pe care am dezvoltat-o pentru a ajuta la stilizarea componentelor UI folosind Sass. Acest articol va fi o scurtă introducere în câteva concepte care (dacă sunteți familiarizați cu Sass) ar trebui să vă pară familiare. Aceste concepte se numesc Cell Atoms și Cell Molecules.
Un Cell Atom este o singură proprietate CSS care emite două valori diferite care vor fi aplicate unui element în funcție de un anumit context transmis. În acest caz, contextul ar putea însemna lucruri cum ar fi prezența anumitor modificatori/pseudo-staturi, sau dacă elementul/un element părinte este sau nu este trecut etc. Acest lucru este util mai ales la comutarea proprietăților pe baza unui eveniment sau a unei interacțiuni.
Un exemplu ar putea fi utilizarea proprietății display
pentru a ascunde/afișa un element. Dacă valoarea proprietății display
este sau nu none
sau ceva de genul block
va depinde de contextul sau condiția în cauză. În Sass simplu, acest lucru ar putea arăta ceva de genul:
…ceea ce ar arăta elementul atunci când acesta are clasa active
. Dacă am dori să afișăm elementul atunci când un anumit părinte are în schimb clasa active
, acest lucru ar putea arăta ceva de genul:
Potem reprezenta acest exemplu folosind unele API CSS-in-JS, care ar putea arăta ceva de genul:
…aici putem vedea cum în exemplul JavaScript definim doar o singură proprietate display
, valoarea fiind dinamică. Această valoare ar fi reevaluată de fiecare dată când obiectul context
se modifică, elementul fiind repictat în consecință.
În exemplul Sass, dată fiind natura în cascadă a CSS (și lipsa dinamismului), definim mai multe proprietăți display
în cascadă și lăsăm bătălia de specificitate să determine restul. Având în vedere că Sass are funcții, ne-am putea gândi să ocolim acest lucru prin crearea unei funcții context
personalizate pentru a imita comportamentul CSS-in-JS, ceva de genul:
Cu toate acestea, acest lucru nu ar putea funcționa niciodată – acest lucru ar putea compila doar o singură regulă CSS (folosind orice valoare evaluată în momentul compilării). Sass ar putea evalua context('.someParent.active', block, none)
doar o singură dată înainte de a fi trimisă către client și, prin urmare, ar putea crea doar o singură regulă CSS; în timp ce JavaScript ar putea evalua context.someParent.active ? 'block' : 'none'
din mers.
Cel mai bun lucru pe care l-am putea face ar fi să avem Mixins separate pentru fiecare proprietate de interes. Acest Mixin ar fi cunoscut sub numele de Cell Atom. Dacă folosim Using Cell și display
Atom, exemplul de mai sus ar putea fi redus la:
…care, după cum puteți vedea, este acum foarte asemănător cu versiunea CSS-in-JS, lăsându-ne cu mai puțin cod care este la fel de ușor de citit. Acest lucru ar putea acum, sub acoperire, să producă oricâte proprietăți CSS în oricâte reguli dorim. Codul de mai sus ar fi un zahăr sintactic pentru:
…și, într-adevăr, fiecare instanță a unui Cell Atom ar fi reprezentată sub capotă într-un mod similar cu cel de mai sus (cu contextul care este trecut la Atom fiind transmis către context
Mixin).
Acest concept este util pentru anumite cazuri în care contexte specifice solicită modificarea unei singure proprietăți CSS, exemplul hide
/show
fiind cel mai comun caz de utilizare la care mă pot gândi. Dacă ați avea nevoie să aplicați mai multe proprietăți CSS unui element pe baza unui context/condiție transmisă, ar trebui să folosiți context
Mixin.
Desigur, poate vă gândiți că a avea Mixin-uri separate pentru fiecare proprietate este exagerat, și ați avea dreptate, având în vedere că există, cât, vreo 800 de proprietăți CSS? Cu toate acestea, majoritatea proprietăților CSS nu ar trebui să fie utilizate în acest mod – doar proprietățile care afectează aspectul/funcționalitatea (și chiar și atunci, doar atunci când o singură proprietate controlează un singur comportament, cum ar fi hide/show). Ca atare, Cell vine în prezent doar cu atomi pentru proprietățile display
, position
și visibility
.