Cell ist eine Bibliothek, die ich entwickelt habe, um bei der Gestaltung von UI-Komponenten mit Sass zu helfen. Dieser Artikel wird eine kurze Einführung in ein paar Konzepte sein, die Ihnen (wenn Sie mit Sass vertraut sind) vertraut vorkommen sollten. Diese Konzepte werden Cell-Atome und Cell-Moleküle genannt.
Ein Cell-Atom ist eine einzelne CSS-Eigenschaft, die zwei verschiedene Werte ausgibt, die auf ein Element basierend auf einem übergebenen Kontext angewendet werden. In diesem Fall könnte der Kontext Dinge wie das Vorhandensein bestimmter Modifikatoren/Pseudozustände bedeuten, oder ob das Element/ein übergeordnetes Element mit dem Mauszeiger bewegt wird oder nicht usw. Dies ist vor allem dann nützlich, wenn Eigenschaften auf der Grundlage eines Ereignisses oder einer Interaktion umgeschaltet werden sollen.
Ein Beispiel könnte die Verwendung der display-Eigenschaft sein, um ein Element aus- oder einzublenden. Ob der Wert der display-Eigenschaft none oder etwas wie block ist, hängt vom jeweiligen Kontext oder der jeweiligen Bedingung ab. In einfachem Sass könnte dies etwa so aussehen:
… was das Element anzeigen würde, wenn es die Klasse active hat. Wenn wir das Element anzeigen wollten, wenn ein bestimmtes übergeordnetes Element stattdessen die Klasse active hat, könnte dies etwa so aussehen:
Wir können dieses Beispiel mit einer CSS-in-JS-API darstellen, die etwa so aussehen könnte:
…hier können wir sehen, wie wir im JavaScript-Beispiel nur eine display-Eigenschaft definieren, wobei der Wert dynamisch ist. Dieser Wert wird jedes Mal neu bewertet, wenn sich das context-Objekt ändert, und das Element wird entsprechend neu gezeichnet.
Im Sass-Beispiel definieren wir angesichts des kaskadierenden Charakters von CSS (und der fehlenden Dynamik) mehrere display-Eigenschaften in kaskadierender Weise und lassen den Kampf um die Spezifität den Rest bestimmen. Da Sass über Funktionen verfügt, könnten wir dies umgehen, indem wir eine benutzerdefinierte context-Funktion erstellen, um das CSS-in-JS-Verhalten zu imitieren, etwa so:
Das könnte jedoch niemals funktionieren – dies könnte immer nur zu einer einzigen CSS-Regel kompiliert werden (unter Verwendung des Werts, der zur Kompilierungszeit ausgewertet wird). Sass könnte context('.someParent.active', block, none) nur einmal auswerten, bevor es an den Client gesendet wird, und somit nur eine einzige CSS-Regel erstellen, während JavaScript context.someParent.active ? 'block' : 'none' „on the fly“ auswerten könnte.
Das Beste, was wir tun könnten, wäre, separate Mixins für jede Eigenschaft von Interesse zu haben. Dieses Mixin würde als Cell Atom bezeichnet werden. Bei Verwendung von Cell und display Atom könnte das obige Beispiel reduziert werden auf:
…was, wie Sie sehen können, der CSS-in-JS-Version sehr ähnlich ist, so dass wir weniger Code haben, der genauso lesbar ist. Dies könnte nun unter der Haube so viele CSS-Eigenschaften in so vielen Regeln ausgeben, wie wir wollen. Der obige Code wäre syntaktischer Zucker für:
…und in der Tat würde jede Instanz eines Cell-Atoms unter der Haube auf ähnliche Weise wie oben dargestellt werden (mit dem Kontext, der an das Atom übergeben wird, das an das context Mixin weitergeleitet wird).
Dieses Konzept ist für bestimmte Fälle nützlich, in denen bestimmte Kontexte nur die Änderung einer einzigen CSS-Eigenschaft erfordern, wobei das Beispiel hide/show der häufigste Anwendungsfall ist, den ich mir vorstellen kann. Wenn Sie mehrere CSS-Eigenschaften auf ein Element auf der Grundlage eines übergebenen Kontextes/einer Bedingung anwenden müssen, sollten Sie das context Mixin verwenden.
Natürlich denken Sie vielleicht, dass es übertrieben ist, für jede Eigenschaft ein eigenes Mixin zu haben, und Sie hätten Recht, wenn man bedenkt, dass es etwa 800 CSS-Eigenschaften gibt. Die meisten CSS-Eigenschaften sollten jedoch nicht auf diese Weise verwendet werden – nur Eigenschaften, die sich auf das Layout/die Funktionalität auswirken (und selbst dann nur, wenn die einzelne Eigenschaft ein einziges Verhalten steuert, z. B. Ausblenden/Einblenden). Daher verfügt Cell derzeit nur über Atome für die Eigenschaften display, position und visibility.
Cell Molecules
Ein Cell Molecule ist im Grunde nur ein reguläres Sass Mixin, das eine oder mehrere CSS-Regeln auf der Grundlage eines übergebenen Kontexts/einer Bedingung ausgibt, um ein bestimmtes Ergebnis zu erzielen. Das Ziel ist es, wiederkehrende Muster in zusammensetzbare Mixins zu abstrahieren und so die Übersichtlichkeit und Wartbarkeit Ihrer Sass-Codebasis zu verbessern. Im Gegensatz zu Cell Atoms werden bei Cell Molecules keine CSS-Eigenschaften oder -Werte übergeben.
Das Prinzip ähnelt dem der Bourbon Sass-Bibliothek (mit dem Unterschied, dass ein Cell Molecule einen Kontext-Input erhält und mehrere kontextgesteuerte Regeln ausgibt). Nimmt man das vorherige Beispiel hide/show, so könnte dies in ein Cell-Molekül abstrahiert und wie folgt verwendet werden:
…im Wesentlichen wird Cell gesagt: „Blende dieses Element aus, es sei denn, die übergebene Bedingung ist erfüllt, in diesem Fall zeige es“. Die erforderliche Funktionalität (d.h. die Anwendung von none– oder block-Werten) würde unter der Haube von dem hypothetischen show-Mixin gehandhabt werden. Das obige wäre syntaktischer Zucker für:
…äquivalent (im Prinzip) zu diesem früheren Vanilla-Sass-Beispiel, das wir gesehen haben:
Es gibt keinen wirklich festen Weg, ein CSS-Set als Cell Molecule zu qualifizieren; es kann ein beliebiges abstraktes und wiederkehrendes Muster sein, das einen Standardzustand erfordert, der sich je nach Kontext ändert.
Zellmoleküle sind nur eine Philosophie/ein Konzept; es gibt derzeit keine Cell Molecules Bibliothek oder ähnliches
Schlussfolgerung
Während Cell Atome und Moleküle unterschiedlichen Zwecken dienen, ist das ultimative Ziel von beiden, Stile kompositiver zu halten. Durch die Verwendung von Cell und die Identifizierung der Atome und Moleküle in Ihrer Codebasis (oder deren Vorhersage, wenn Sie ein neues Projekt/Feature erstellen) können Sie sicherstellen, dass Ihre Codebasis prägnanter und semantischer ist und weniger mit verschiedenen CSS-Eigenschaften übersät ist, die zweifellos in keiner wirklichen Reihenfolge aufgesetzt werden.
Wenn wir uns die verschiedenen Beispiele aus diesem Artikel nebeneinander ansehen, können wir ein besseres Verständnis für die Beweggründe hinter diesen Konzepten bekommen (denken Sie daran, dass alle diese Beispiele das Gleiche erreichen):
In vielen Fällen müssen Sie abwägen, ob es notwendig ist, ein Molekül für etwas zu erstellen – im obigen Beispiel, in dem das Molekül nur eine einzige CSS-Eigenschaft betrifft, kann es pragmatischer sein, bei der Verwendung des displayAtoms zu bleiben.