Cell es una biblioteca que he desarrollado para ayudar a estilizar los componentes de la interfaz de usuario utilizando Sass. Este artículo será una breve introducción a un par de conceptos que (si estás familiarizado con Sass) deberían resultarte familiares. Estos conceptos se llaman Átomos de Celda y Moléculas de Celda.
Un Átomo de Celda es una sola propiedad CSS que produce dos valores diferentes que se aplicarán a un elemento basado en algún contexto pasado. En este caso, el contexto podría significar cosas como la presencia de ciertos modificadores/pseudoestados, o si el elemento/algunos de los elementos padre están o no sobrevolados, etc. Esto es muy útil cuando se alternan propiedades basadas en algún evento o interacción.
Un ejemplo podría ser el uso de la propiedad display para ocultar/mostrar un elemento. Que el valor de la propiedad display sea none o algo como block dependerá del contexto o condición en cuestión. En Sass plano, esto podría ser algo como:
…lo que mostraría el elemento cuando tiene la clase active. Si quisiéramos mostrar el elemento cuando un padre específico tuviera la clase active en su lugar, esto podría verse algo como:
Podemos representar este ejemplo usando alguna API CSS-in-JS, que podría verse algo como:
…aquí podemos ver como en el ejemplo de JavaScript sólo definimos una propiedad display, siendo el valor dinámico. Este valor se reevaluaría cada vez que el objeto context cambiara, repintando el elemento en consecuencia.
En el ejemplo de Sass, dada la naturaleza en cascada de CSS (y la falta de dinamismo), definimos múltiples propiedades display en cascada, y dejamos que la batalla de la especificidad determine el resto. Como Sass tiene funciones, podríamos pensar en eludir esto creando una función context personalizada para imitar el comportamiento de CSS-in-JS, algo así como:
Sin embargo, esto nunca podría funcionar – esto sólo podría compilar una única regla CSS (utilizando cualquier valor evaluado en tiempo de compilación). Sass podría evaluar context('.someParent.active', block, none) sólo una vez antes de ser enviado al cliente, y por lo tanto sólo crear una única regla CSS; mientras que JavaScript podría evaluar context.someParent.active ? 'block' : 'none' sobre la marcha.
Lo mejor que podríamos hacer sería tener Mixins separados para cada propiedad de interés. Este Mixin se conocería como un Cell Atom. Si se utiliza el Cell y el display Atom, el ejemplo anterior podría reducirse a:
…que como puedes ver es ahora muy similar a la versión CSS-in-JS, dejándonos con menos código que es igual de legible. Esto podría ahora, bajo el capó, dar salida a cuantas propiedades CSS en cuantas reglas queramos. El código anterior sería azúcar sintáctico para:
… y, de hecho, cada instancia de un Cell Atom se representaría bajo el capó de una manera similar a la anterior (con el contexto que se pasa al Atom siendo reenviado al context Mixin).
Este concepto es útil para ciertos casos en los que contextos específicos requieren que se modifique una sola propiedad CSS, siendo el ejemplo de hide/show el caso de uso más común que se me ocurre. Si necesitas aplicar múltiples propiedades CSS a un elemento basado en algún contexto/condición pasada, deberías usar el Mixin context.
Por supuesto, puedes estar pensando que tener Mixins separados para cada propiedad es una exageración, y tendrías razón, dado que hay, ¿qué, como 800 propiedades CSS? Sin embargo, la mayoría de las propiedades CSS no deberían usarse de esta manera – sólo las propiedades que afectan al diseño/funcionalidad (e incluso entonces, sólo cuando la propiedad controla un único comportamiento, como ocultar/mostrar). Como tal, Cell actualmente sólo viene con Átomos para las propiedades display, position y visibility.
Moléculas de Cell
Una Molécula de Cell es esencialmente sólo un Mixin Sass regular que produce una o más reglas CSS basadas en algún contexto/condición pasada para lograr un único resultado específico. El objetivo es abstraer los patrones recurrentes en Mixins componibles, mejorando la claridad y la capacidad de mantenimiento de su código base Sass. No se pasan propiedades o valores CSS cuando se usan (llaman) Moléculas Celulares, a diferencia de los Átomos Celulares.
Esto es bastante similar en principio a la librería Bourbon Sass (la diferencia es que una Molécula Celular toma una entrada de contexto y producirá múltiples reglas basadas en el contexto). Tomando el ejemplo anterior de hide/show, esto podría ser abstraído en una Molécula Celular y utilizado así:
… esencialmente diciéndole a Cell «Oculta este elemento a menos que la condición pasada se cumpla, en cuyo caso lo muestra». La funcionalidad requerida (es decir, la aplicación de los valores none o block) sería manejada por el hipotético Mixin show. Lo anterior sería azúcar sintáctico para:
…equivalente (en principio) a este ejemplo anterior de Sass vainilla que vimos:
No hay una forma real de calificar algún conjunto CSS como Molécula Celular; puede ser cualquier patrón abstracto y recurrente que requiera un estado por defecto que cambie basado en algún contexto.
Las Moléculas Celulares son sólo una filosofía/concepto; actualmente no hay ninguna biblioteca de Moléculas de Célula ni nada
Conclusión
Mientras que los Átomos de Célula y las Moléculas sirven para diferentes propósitos, el objetivo final de ambos es mantener los estilos más componibles. Usando Cell e identificando los Átomos y Moléculas dentro de tu código base (o previniendo/anticipando si se crea un nuevo proyecto/característica) puedes asegurarte de que tu código base sea más conciso y semántico, y menos plagado de varias propiedades CSS que sin duda serán puestas sin ningún orden.
Al ver los distintos ejemplos de este artículo uno al lado del otro podemos entender mejor las motivaciones detrás de estos conceptos (recuerde que todos estos ejemplos logran lo mismo):
En muchos casos tendría que considerar si hay una necesidad de crear una Molécula para algo – en el ejemplo anterior donde la Molécula sólo afecta a una sola propiedad CSS puede ser más pragmático seguir utilizando el display Átomo.