Dustin Schau begleitet mich in diesem Video und er wird mich auf eine Tour durch die Welt von CSS-in-JS mitnehmen. Das heißt, Sie gestalten Ihr Styling vollständig in JavaScript und nicht in .cssDateien, die Sie alleine im Kopf haben.
Dustin ist ein perfekter Leitfaden dafür, da er ein großartiges Erkundungswerkzeug namens CSS in JS Playground erstellt hat und auch einen brandneuen Kurs zu diesem Thema hat.
Wenn Sie neugierig sind, warum jemand überhaupt daran interessiert ist, den CSS-in-JS-Weg zu gehen, werden im Video einige Gründe erläutert:
- Eliminierung des toten Codes. Die einzigen Stile, die geladen werden, sind die Stile für die zu einem bestimmten Zeitpunkt verwendeten Komponenten. Es gibt keine unbenutzten Stile. Wenn eine Komponente stirbt, sterben auch ihre Stile.
- Scoping. Das Schreiben neuer Stile kann nichts anderes an anderen Stellen auf der Site beeinflussen. Sie müssen sich also keine Gedanken darüber machen, einen Stil zu schreiben, der aufgrund eines Selektors im globalen Bereich an anderer Stelle schlimme oder unbeabsichtigte Konsequenzen hat. Wir erhalten Bereichsschutz durch Namensideologien wie BEM, aber es wird nicht durch Tools erzwungen.
- Sorgenfreie Benennung. In einigen Fällen ist es nicht erforderlich, einen Klassennamen oder eine ID für das zu gestylende Element auszuwählen, da die Ausgabe eine Benutzeroberfläche enthält.
- Entwicklerergonomie. Es kann schön sein, Stile in derselben Datei (oder auf andere Weise sehr nahe) an der Komponente selbst zu haben. Ebenso fühlen sich einige Entwickler in JSX sehr wohl. Wenn Entwickler in der Lage sind, Dinge ohne Bedenken hinsichtlich des Umfangs zu stylen, fühlen sie sich möglicherweise eher gestylt als eingeschüchtert.
- Design systemfreundlich. Bei Designsystemen dreht sich alles um Komponenten, ebenso wie bei React. Diese komplementären Denkweisen stimmen sehr gut überein.
- Möglichkeiten von JavaScript in CSS. Wenn Sie dies mit logischen Operatoren tun und Werte, Mathematik und so weiter übergeben, ist es sehr nützlich, die volle Leistung von JavaScript in Stilen zu haben.
Und das ist nicht alles, aber Sie können sehen, warum es manche Menschen überzeugt. Es hat sicherlich viele Diskussionen angeregt. Warum nicht, wenn es all diese Vorteile bietet? Nun, es ist eine ganz andere Entwicklungsumgebung, die nicht unbedingt bei jedem anklickt. Es erfordert das Biegen der Webplattform, um etwas ungewöhnliches zu tun, und das geht mit Warzen einher. Ganz zu schweigen davon, dass es buchstäbliche Kosten (Größe der Pakete und dergleichen) gibt, für die Benutzer zahlen, von denen Sie besser hoffen, dass sie sich mit Effizienz amortisieren.
Dustin ging so weit, eine Demo mit Sass zu erstellen, um Dinge zu stylen und sie mit der Funktionsweise von CSS-in-JS zu vergleichen. Dies zeigt, wie Portierungsstile aussehen und welche Möglichkeiten es gibt.