Introducem Cell Atoms & Molecules

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:

API preluată din biblioteca Lucid

…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.

Cell Molecules

O Cell Molecule este, în esență, doar un Mixin Sass obișnuit care emite una sau mai multe reguli CSS pe baza unui context/condiție transmisă pentru a obține un singur rezultat specific. Scopul este de a abstractiza modelele recurente în Mixins compozabile, îmbunătățind claritatea și mentenabilitatea bazei de cod Sass. La utilizarea (apelarea) Cell Molecules nu se transmit proprietăți sau valori CSS, spre deosebire de Cell Atoms.

Acest lucru este destul de asemănător, în principiu, cu biblioteca Bourbon Sass (diferența fiind că un Cell Molecule primește un context de intrare și va emite mai multe reguli bazate pe context). Luând exemplul anterior hide/show, acesta ar putea fi abstractizat într-o moleculă Cell și utilizat astfel:

…în esență, spunându-i lui Cell „Ascunde acest element dacă nu este îndeplinită condiția transmisă, caz în care îl arată”. Funcționalitatea necesară (de exemplu, aplicarea valorilor none sau block) ar fi gestionată sub capotă de ipoteticul show Mixin. Cele de mai sus ar fi zahăr sintactic pentru:

…echivalent (în principiu) cu acest exemplu anterior de Sass vanilie pe care l-am văzut:

Nu există o modalitate cu adevărat dură de a califica un anumit set CSS ca fiind o moleculă celulară; acesta poate fi orice model abstract și recurent care necesită o stare implicită care se schimbă în funcție de un anumit context.

Moleculele Celulare sunt doar o filozofie/concept; în prezent nu există o bibliotecă Cell Molecules sau ceva de genul acesta

Vizitați Cell Wiki pentru mai multe informații referitoare la biblioteca Cell

Concluzie

În timp ce Cell Atoms și Cell Molecules servesc scopuri diferite, scopul final al ambelor este de a păstra stilurile mai ușor de compus. Utilizând Cell și identificând atomii și moleculele din baza dvs. de cod (sau prevăzându-le/anticipându-le dacă creați un nou proiect/caracteristică) vă puteți asigura că baza dvs. de cod este mai concisă și semantică și mai puțin plină de diverse proprietăți CSS care vor fi, fără îndoială, aplicate fără o ordine reală.

Urmărind diversele exemple din acest articol unul lângă altul, putem înțelege mai bine motivațiile din spatele acestor concepte (rețineți că toate aceste exemple realizează același lucru):

În multe cazuri va trebui să vă gândiți dacă este nevoie să creați o moleculă pentru ceva – în exemplul de mai sus, în care molecula afectează doar o singură proprietate CSS, ar putea fi mai pragmatic să rămâneți cu utilizarea display Atomului.

Lasă un răspuns

Adresa ta de email nu va fi publicată.