Cell é uma biblioteca que desenvolvi para ajudar na criação de componentes UI usando Sass. Este artigo será uma pequena introdução a alguns conceitos que (se você está familiarizado com Sass) deve se sentir familiarizado. Estes conceitos são chamados Cell Atoms e Cell Molecules.
A Cell Atom é uma propriedade CSS única que produz dois valores diferentes que serão aplicados a um elemento com base em algum contexto passado. Neste caso, contexto pode significar coisas como a presença de certos modificadores/seudo-estados, ou se o elemento/algum elemento pai está ou não pairando, etc. Isto é mais útil quando se alterna propriedades com base em algum evento ou interação.
Um exemplo pode ser usar a propriedade display para esconder/mostrar um elemento. Se o valor da propriedade display é ou não none ou algo como block dependerá do contexto ou condição em questão. No Sass simples, isto pode parecer algo como:
…que mostraria o elemento quando ele tem a classe active. Se quiséssemos mostrar o elemento quando um pai específico tivesse a classe active, isto poderia parecer algo como:
Podemos representar este exemplo usando algum CSS-in-JS API, que poderia parecer algo como:
…aqui podemos ver como no exemplo JavaScript apenas definimos uma display propriedade, com o valor sendo dinâmico. Este valor seria reavaliado toda vez que o objeto context mudasse, com o elemento sendo repintado de acordo.
No exemplo Sass, dada a natureza em cascata do CSS (e a falta de dinamismo), definimos múltiplas propriedades display em cascata, e deixamos a batalha da especificidade determinar o resto. Como Sass tem funções, poderíamos pensar em contornar isso criando um costume context função para imitar o comportamento do CSS em SSS, algo como:
No entanto, isso nunca poderia funcionar – isso só poderia compilar para uma única regra do CSS (usando qualquer valor avaliado em tempo de compilação). Sass poderia avaliar context('.someParent.active', block, none) apenas uma vez antes de ser enviado para o cliente, e assim criar apenas uma única regra CSS; enquanto JavaScript poderia avaliar context.someParent.active ? 'block' : 'none' na hora.
O melhor que poderíamos fazer seria ter Mixins separados para cada propriedade de interesse. Este Mixin seria conhecido como um Átomo Celular. Se usando Cell e o display Atom, o exemplo acima poderia ser reduzido para:
…que como você pode ver é agora muito semelhante à versão CSS-in-JS, deixando-nos com menos código que é igualmente legível. Isto poderia agora, por baixo do título, produzir quantas propriedades CSS em quantas regras quisermos. O código acima seria açúcar sintáctico para:
…e de facto, cada instância de um Átomo de Célula seria representada por debaixo do capô de forma semelhante à acima (com o contexto que é passado para o Átomo sendo encaminhado para a context Mixin).
Este conceito é útil para certos casos onde contextos específicos requerem apenas uma única propriedade CSS a ser modificada, sendo o hide/show exemplo o caso de uso mais comum que eu poderia pensar. Se você precisasse aplicar múltiplas propriedades CSS a um elemento baseado em algum contexto/condição passada, você deveria usar o context Mixin.
Obviamente, você pode estar pensando que ter Mixins separados para cada propriedade é exagero, e você estaria certo, já que existem, o quê, como 800 propriedades CSS? No entanto a maioria das propriedades CSS não devem ser usadas desta forma – apenas propriedades que afetam o layout/funcionalidade (e mesmo assim, apenas quando a propriedade única controla um único comportamento, como hide/show). Como tal, Cell atualmente só vem com Atoms para display, position e visibility propriedades.
Cell Molecules
A Cell Molecule é essencialmente apenas uma Sass Mixin regular que produz uma ou mais regras CSS baseadas em algum contexto/condição passada para alcançar um único resultado específico. O objetivo é abstrair padrões recorrentes em Mixins componíveis, melhorando a clareza e a manutenção da sua base de códigos Sass. Nenhuma propriedade ou valor CSS é passada ao usar (chamando) Cell Molecules, ao contrário de Cell Atoms.
Esta é bastante similar em princípio à biblioteca Bourbon Sass (a diferença é que uma Cell Molecule pega uma entrada de contexto e irá emitir múltiplas regras orientadas a contexto). Tomando o exemplo anterior hide/show, isto poderia ser abstraído em uma Cell Molecule e usado assim:
…essencialmente dizendo à Cell “Hide this element unless the passed condition is met, in which case show it”. A funcionalidade requerida (isto é, aplicando none ou block valores) ele manipularia sob a condição passada pelo hipotético show Mixin. O acima seria açúcar sintático para:
…equivalente (em princípio) a este exemplo anterior de baunilha Sass que vimos:
Não há uma maneira realmente difícil de qualificar algum conjunto CSS como uma Molécula Celular; pode ser qualquer padrão abstrato e recorrente que requer um estado padrão que muda com base em algum contexto.
Cell Molecules são apenas uma filosofia/conceito; não há atualmente nenhuma biblioteca de Moléculas Celulares ou qualquer outra coisa
Conclusão
Alguns Átomos Celulares e Moléculas servem diferentes propósitos, o objetivo final de ambos é manter os estilos mais componíveis. Ao usar Cell e identificar os Atoms e Molecules dentro da sua base de código (ou prever/anticipar deles se criar um novo projeto/featureza) você pode garantir que sua base de código é mais concisa e semântica, e menos repleta de várias propriedades CSS que sem dúvida serão colocadas em nenhuma ordem real.
Dando uma olhada nos vários exemplos deste artigo lado a lado podemos ter uma melhor compreensão das motivações por trás destes conceitos (lembre-se que todos estes exemplos atingem a mesma coisa):
Em muitos casos você precisaria considerar se há necessidade de criar uma Molecule para algo – no exemplo acima onde a Molecule afeta apenas uma única propriedade CSS pode ser mais pragmático ficar usando a display Atom.