Cell est une bibliothèque que j’ai développée pour aider à styliser les composants de l’interface utilisateur en utilisant Sass. Cet article sera une courte introduction dans un couple de concepts qui (si vous êtes familier avec Sass) devrait vous sembler familier. Ces concepts sont appelés Atomes de cellule et Molécules de cellule.
Un Atome de cellule est une propriété CSS unique qui sort deux valeurs différentes qui seront appliquées à un élément en fonction d’un certain contexte passé. Dans ce cas, le contexte peut signifier des choses comme la présence de certains modificateurs/pseudo-états, ou si l’élément/un élément parent est survolé ou non, etc. Ceci est surtout utile pour basculer les propriétés en fonction d’un certain événement ou d’une interaction.
Un exemple pourrait être l’utilisation de la propriété display pour cacher/afficher un élément. Que la valeur de la propriété display soit ou non none ou quelque chose comme block dépendra du contexte ou de la condition en question. En Sass simple, cela pourrait ressembler à quelque chose comme:
…ce qui montrerait l’élément quand il a la classe active. Si nous voulions montrer l’élément quand un parent spécifique avait la classe active à la place, cela pourrait ressembler à quelque chose comme:
Nous pouvons représenter cet exemple en utilisant une certaine API CSS-in-JS, qui pourrait ressembler à quelque chose comme :
…ici nous pouvons voir comment dans l’exemple JavaScript nous définissons juste une propriété display, avec la valeur étant dynamique. Cette valeur serait réévaluée chaque fois que l’objet context change, l’élément étant repeint en conséquence.
Dans l’exemple Sass, étant donné la nature en cascade de CSS (et le manque de dynamisme), nous définissons plusieurs propriétés display en cascade, et laissons la bataille de la spécificité déterminer le reste. Comme Sass a des fonctions, nous pourrions penser à contourner cela en créant une fonction context personnalisée pour imiter le comportement de CSS-in-JS, quelque chose comme:
Mais cela ne pourrait jamais fonctionner – cela ne pourrait jamais compiler à une seule règle CSS (en utilisant n’importe quelle valeur évaluée au moment de la compilation). Sass pourrait évaluer context('.someParent.active', block, none) juste une fois avant de l’envoyer au client, et donc ne créer qu’une seule règle CSS ; alors que JavaScript pourrait évaluer context.someParent.active ? 'block' : 'none' à la volée.
Le mieux que nous puissions faire serait d’avoir des Mixins séparés pour chaque propriété d’intérêt. Ce Mixin serait connu sous le nom de Cell Atom. Si l’on utilise Cell et l’Atom display, l’exemple ci-dessus pourrait être réduit à :
…qui comme vous pouvez le voir est maintenant très similaire à la version CSS-in-JS, nous laissant avec moins de code tout aussi lisible. Cela pourrait maintenant, sous le capot, produire autant de propriétés CSS dans autant de règles que nous le souhaitons. Le code ci-dessus serait du sucre syntaxique pour:
…et en effet, chaque instance d’un Atom de cellule serait représentée sous le capot d’une manière similaire à celle ci-dessus (avec le contexte qui est passé à l’Atom étant transmis vers le bas au Mixin context).
Ce concept est utile pour certains cas où des contextes spécifiques demandent qu’une seule propriété CSS soit modifiée, l’exemple hide/show étant le cas d’utilisation le plus courant auquel je puisse penser. Si vous aviez besoin d’appliquer plusieurs propriétés CSS à un élément basé sur un certain contexte/condition passé, vous devriez utiliser le context Mixin.
Bien sûr, vous pouvez penser qu’avoir des Mixins séparés pour chaque propriété est exagéré, et vous auriez raison, étant donné qu’il y a, quoi, comme 800 propriétés CSS ? Cependant, la plupart des propriétés CSS ne devraient pas être utilisées de cette façon – seulement les propriétés qui affectent la disposition/fonctionnalité (et même dans ce cas, seulement quand la propriété unique contrôle un comportement unique, comme hide/show). En tant que tel, Cell est actuellement livré avec des Atomes pour les propriétés display, position et visibility.
Molécules Cell
Une molécule Cell est essentiellement un mixin Sass ordinaire qui produit une ou plusieurs règles CSS basées sur un contexte/condition passé(e) pour obtenir un résultat spécifique unique. L’objectif est d’abstraire les modèles récurrents en Mixins composables, améliorant ainsi la clarté et la maintenabilité de votre base de code Sass. Aucune propriété ou valeur CSS n’est passée lors de l’utilisation (de l’appel) de Cell Molecules, contrairement à Cell Atoms.
Ceci est assez similaire dans son principe à la bibliothèque Bourbon Sass (la différence étant qu’une Cell Molecule prend une entrée de contexte et sortira plusieurs règles pilotées par le contexte). En prenant l’exemple précédent hide/show, cela pourrait être abstrait dans une molécule de cellule et utilisé comme suit:
…essentiellement en disant à Cell « Cacher cet élément à moins que la condition passée soit remplie, auquel cas le montrer ». La fonctionnalité requise (c’est-à-dire l’application des valeurs none ou block) serait gérée sous le capot par l’hypothétique Mixin show. Ce qui précède serait du sucre syntaxique pour :
… équivalent (en principe) à cet exemple Sass vanille plus tôt que nous avons vu :
Il n’y a pas vraiment de manière dure de qualifier un ensemble CSS comme une molécule cellulaire ; il peut s’agir de n’importe quel modèle abstrait et récurrent qui nécessite un état par défaut qui change en fonction d’un certain contexte.
Les Cell Molecules sont juste une philosophie/un concept ; il n’y a actuellement aucune bibliothèque Cell Molecules ou quoi que ce soit
Conclusion
Alors que les Atomes et les Molécules Cell servent des objectifs différents, le but ultime des deux est de garder les styles plus composables. En utilisant Cell et en identifiant les Atomes et Molécules au sein de votre base de code (ou en les prédisant/anticipant si vous créez un nouveau projet/une nouvelle fonctionnalité), vous pouvez vous assurer que votre base de code est plus concise et sémantique, et moins criblée de diverses propriétés CSS qui seront sans doute claquées sans véritable ordre.
En regardant les différents exemples de cet article côte à côte, nous pouvons mieux comprendre les motivations derrière ces concepts (rappelez-vous que tous ces exemples réalisent la même chose):
Dans de nombreux cas, vous auriez besoin de considérer s’il est nécessaire de créer une Molécule pour quelque chose – dans l’exemple ci-dessus où la Molécule n’affecte qu’une seule propriété CSS, il peut être plus pragmatique de s’en tenir à l’utilisation de l’Atome display.