Lernen Sie EmotionJS während Ihres Morgenkaffees - so einfach ist das.

EmotionJS ist eine CSS-in-JavaScript-Bibliothek mit unglaublichen Funktionen. Lassen Sie uns sehen, wie sich die Welt von CSS zu dieser Lösung entwickelt hat, und dann eingehend untersuchen, was Sie heute damit tun können.

Die CSS-Kriege (eine Zusammenfassung)

In den letzten Jahren haben wir einen Übergang zu verschiedenen Arten von Styling-Methoden erlebt, die alle auf CSS basieren. Hier ist das Wesentliche in chronologischer Reihenfolge:

Einfaches altes CSS

Dies ist die klassische und einfache Methode zum Anwenden von CSS. Wir verweisen auf eine CSS-Datei in unserer index.html und sie wird nach den klassischen CSS-Regeln auf unsere HTML-Dateien angewendet.

Dieser Ansatz hat Probleme, wenn er im Maßstab angewendet wird, da CSS auf Spezifität basiert, die vorsichtig behandelt werden muss, wenn wir CSS-Kollisionen verhindern möchten.

Es ist auch schwierig zu debuggen, wenn Sie im Browser prüfen. Es ist schwer zu verstehen, welche Kombination von CSS-Eigenschaften den Stil eines HTML-Tags beeinflusst hat.

CSS-Präprozessoren

Normales altes CSS hatte einige Einschränkungen und führte zu einigen Erweiterungen von CSS wie Less und Sass. Diese Spracherweiterungen ermöglichen es uns, in einer Sprache mit stärkeren Fähigkeiten zu schreiben. Beispiele hierfür sind die Verschachtelung von CSS-Selektoren, Funktionen und mehr. Unser Build-Tool kompiliert diese Dateien zu einfachen CSS-Dateien und sie werden auf normale Weise angewendet.

CSS-Module

Dieser Ansatz wurde eingeführt, als die Webentwicklung begann, Webseiten als Bäume von Komponenten zu behandeln. Bei CSS-Modulen geht es darum, eine Komponente unabhängig zu gestalten, andere Teile der Benutzeroberfläche nicht zu beeinflussen und von ihnen nicht betroffen zu sein.

Nach der Einführung von CSS-Modulen in unser Projekt verweist jede Komponente auf eine CSS-Datei mit normalem oder vorverarbeitetem CSS. Während des Erstellungsprozesses verwendet unser Erstellungssystem (z. B. Webpack) jede CSS-Klasse, stellt ihr den Namen der Komponente voran und fügt ihr eine eindeutige Kennung hinzu, damit die Klasse eindeutig ist.

Dieser Ansatz ist großartig, da es sehr einfach ist, eine CSS-Isolation zu erreichen. Es ist auch leicht zu verstehen, welche CSS-Regeln auf unsere HTML-Elemente angewendet wurden und woher sie stammen. Ich war ein großer Befürworter dieses Ansatzes - bis EmotionJS veröffentlicht wurde.

CSS-in-JS

Dieser Ansatz stellt die Praxis des Isolierens von CSS in CSS-Dateien in Frage. Es ermöglicht uns, unsere CSS-Regeln in unserem JavaScript-Code als JS-Objekte anzugeben.

Einige Frameworks wie Reacthaben integrierte Unterstützung für diese Methode. Einige Bibliotheken entstanden aus der Notwendigkeit, eine isoliertere und skalierbarere Lösung bereitzustellen. Die Top-Bibliotheken sind Styled Components und EmotionJS.

Lassen Sie uns diese näher erläutern.

Styled Components versus EmotionJS!

Styled Components kam zuerst und EmotionJS wurde zugegebenermaßen stark davon beeinflusst.

Gestaltete Komponenten sind einfache, kleine React-Komponenten. Sie definieren ein HTML-Tag und seine Stile als Funktion der Requisiten der Komponente.

Dies isoliert die HTML- und CSS-Semantik von unseren funktionaleren React-Komponenten. Dies bietet wiederum eine besser lesbare und wartbare Entwicklungserfahrung.

Beispiel für gestaltete Komponenten:

Was wir hier sehen, ist eine HTML-Schaltfläche mit einigen CSS-Requisiten.

Die colorund backgroundCSS-Eigenschaften werden als Funktion einer primaryRequisite bestimmt, die an die Komponente übergeben wird (oder nicht).

Beachten Sie, dass JSX sehr einfach und semantisch ist und der CSS- und HTML-Teil in die gestaltete Komponente isoliert ist.

Schauen wir uns jetzt EmotionJS an.

EmotionJSNutzt die Kraft gestylter Komponenten und fügt einige weitere nützliche Funktionen hinzu (und auch das coolste Logo aller Zeiten).

Lassen Sie uns die Dinge demonstrieren, die ich mit EmotionJS für am beeindruckendsten hielt.

Eine Sache, die ich bisher gehasst habe, war die Pflege von CSS-Medienabfragen.

Die CSS-Regeln für jeden Haltepunkt befanden sich in verschiedenen Bereichen der CSS-Dateien. Es war schwer, die überlappenden Eigenschaften zu erkennen und zu handhaben.

In EmotionJS können wir mithilfe der Facepaint-Bibliothek eine Konstante erstellen, die unsere Haltepunktbreiten hält.

Wir können dann auf diese Konstante verweisen und die Werte einer CSS-Eigenschaft für jeden Haltepunkt an einer Stelle deklarieren.

Lassen Sie uns dieses Beispiel aufschlüsseln:

  • Zeile 4-9: Wir definieren unsere Haltepunktbreiten an einer Stelle in unserer Anwendung
  • Zeile 13–23: Wir definieren eine Button-Komponente, die ein div-Tag mit einigen CSS-Eigenschaften ist. Seine widthund heightWerte werden als Array von Werten definiert, einer für jeden Haltepunkt. Beachten Sie, dass wir die pxEinheiten nicht angeben müssen . Sie werden automatisch hinzugefügt. Beachten Sie auch, dass die background-colorEigenschaft von der primaryStütze abhängt, die für die Button-Komponente bereitgestellt wird. Dies ähnelt dem Beispiel für gestaltete Komponenten.
  • Zeile 26–33: In unserer React-Komponente verweisen wir auf unsere EmotionJS-Schaltfläche und verwenden sie als JSX-Tag

Weitere Funktionen von EmotionJS

EmotionJS bietet einige weitere Möglichkeiten, um einige dieser Funktionen zu erreichen:

  • Die CSS-Requisite - Wir können unseren React-Komponenten eine CSS-Requisite zur Verfügung stellen, die ein JavaScript-Objekt oder eine Zeichenfolge ist, die unsere CSS-Eigenschaften definiert.
  • Medienabfragen können auch mit dem CSS-Prop-Ansatz angesprochen werden

Abschließend: das Gute, das Schlechte und das Emotionale

Vorteile:

  • Einfache Integration und Ersetzung anderer CSS-Lösungen.
  • Im Vergleich zu anderen Lösungen ist es einfach, toten Code zu identifizieren und zu entfernen.
  • Die Arbeit mit Medienabfragen ist einfacher, da Werte gesammelt werden.
  • Reaktionskomponenten werden semantischer, wenn HTML und CSS isoliert werden.

Nachteile:

  • Mit CSS-Modulen ist es leicht zu verstehen, woher die CSS-Regel bei der Überprüfung im Browser stammt. Dies liegt daran, dass Klassennamen mit Präfixen für React-Komponentennamen generiert werden. Mit EmotionJS passiert dies nicht.
  • Wenn wir eine CSS-Eigenschaft für eine Medienabfrage definieren, müssen wir sie auch für den Rest definieren, da wir ein Array von Werten bereitstellen. In vielen Fällen möchten wir nur eine oder zwei Medienabfragen beantworten und die anderen als Standardwert belassen.

Das Urteil

EmotionJS ist der nächste Schritt in die richtige Richtung, um die Fallstricke von CSS zu beseitigen. Es bietet eine isolierte, wartbare Umgebung, in der unsere Hauptkomponenten logisch zentriert und semantisch sind.

Ich habe buchstäblich zehn Minuten gebraucht, um es zu lernen und zu integrieren, und es ist eine große Verbesserung in diesem Bereich.

Vergiss nicht zu klatschen, wenn dir das gefällt, und folge mir auf Twitter: //twitter.com/shahar_taite