Die CSS-in-React-Landschaft

Ein paar Vorbehalte, bevor wir die Liste durchgehen

• Ich habe keine tiefgreifende Erfahrung mit jeder einzelnen dieser Bibliotheken. Ich habe mehrere davon in echten Projekten verwendet, am häufigsten CSS Modules. Ich kann nicht über die Nuancen jeder einzelnen sprechen. Die Demos unten sind einfache Demonstrationen grundlegender Syntax.
• Wenn ich Fakten falsch darstelle oder Sie mehr Details hinzufügen möchten, kontaktieren Sie mich in den Kommentaren oder über unser Kontaktformular, und ich werde die Dinge verbessern.
• Der Zweck dieses Artikels ist teilweise, ein funktionierendes Codebeispiel für jede Bibliothek zur einfachen Referenz zu haben.

---

styled-components

• Super beliebt – *wahrscheinlich* die meistgenutzte Option.
• Populär gemacht durch die Möglichkeiten dynamischer Stile und die Magie der Verwendung von Props für Variationen.
• Die Template-Literal-Syntax fühlt sich angenehm CSS-ähnlich an. Es scheint, dass sie dazu ermutigt, sie auf diese Weise zu verwenden, aber es ist möglich ( Dokumentation), Objekt-Syntax zu verwenden.
• Unterstützt SSR, aber das ist nicht dasselbe wie "Zero Runtime"-Bibliotheken (was bedeutet "kompiliert zu statischem CSS"). Es wird immer noch ein JavaScript-Runtime für dynamische Stile mitgeliefert.

CSS Modules

• Sehr einfach. Alles, was es tut, ist, Stile zu skopieren und die Co-Lokalisierung von Stilen und Komponenten zu fördern.
• Sein schickes Feature ist Composition, was im Grunde Mixins auf Basis bestehender Klassen sind.
• Keine Laufzeitangelegenheit – es erfordert einen Build-Prozess. Aber es funktioniert trotzdem mit HMR und so weiter. Sie können es mit Stilen in JavaScript ausliefern oder sie in statische CSS-Dateien extrahieren. Es tut nichts Dynamisches, also ist es extrem "Zero Runtime", wenn Sie das CSS extrahieren.
• Kann mit Sass kombiniert werden.
• In Next.js integriert

Emotion

Emotion ist eine Bibliothek, die zum Schreiben von CSS-Stilen mit JavaScript entwickelt wurde. Sie bietet leistungsstarke und vorhersagbare Stil-Komposition sowie eine großartige Entwicklererfahrung mit Funktionen wie Quellzuordnungen, Labels und Test-Utilities. Sowohl String- als auch Objektstile werden unterstützt.

• Es scheint nicht allzu anders als styled-components, um ehrlich zu sein (TBQH), aber dieser Podcast geht auf einige der Leistungsunterschiede ein.
• Unterstützt SSR, ist aber nicht Zero-Runtime.
• Glamorous ist komplett veraltet (und ich nehme an Glam und Glamor ebenfalls?) zugunsten von Emotion, also das ist etwas.

Stitches

• Die Variants API ist sehr nützlich und gut gemacht.
• Die TypeScript-Editor-Erfahrung¹.
• Unterstützt Theming und fördert die Verwendung eines Design-Token-Ansatzes.
• Utilities ermöglichen es Ihnen, Ihre eigenen benutzerdefinierten Kurzschriften für das Styling zu erstellen.
• Unterstützt SSR – und es ist näher an Zero-Runtime, wenn auch nicht ganz. Es scheint auch keine CSS-Dateien zu generieren, sondern hat eine Funktion, die CSS ausgibt, damit Sie SSR über ein <style>-Tag nutzen können (was ich mir für das Caching nicht ideal vorstellen kann).
• Hier ist ein Twitter-Thread mit einer ehrlichen Bewertung. Sehen Sie sich auch alle Reaktionen darauf an.

vanilla-extract

• Ich würde sagen, vanilla-extract unterstützt SSR, aber es ist mehr als das, denn das ist die *einzige* Art und Weise, wie es verwendet wird, es sei denn, Sie entscheiden sich für spezifische "Runtime"-Funktionen, wie z. B. dynamisches Theming. Das ist die Bedeutung von "Zero Runtime": es wird nur in statische CSS-Dateien kompiliert.
• Die TypeScript-Editor-Erfahrung¹. (Siehe auch unseren aktuellen Artikel.)
• Variants API, einschließlich einer Recipes API, die dem Stitches-Framework ähnelt.
• Unterstützt ein Theme und einen Utility-Class-ähnlichen Ansatz über Sprinkles
• Ich wollte Aphrodite auf diese Liste setzen, aber die Schöpfer davon wechseln zu vanilla-extract, also ist es heutzutage wahrscheinlich keine gute Wahl mehr, auch wenn es im Grunde die gleichen Funktionen wie diese anderen Bibliotheken zu bieten scheint.

JSS

• Hat eine React-spezifische Integration
• Hat eine extend-Syntax
• Plugin-Architektur

Linaria

• Die OG der "Zero Runtime" CSS-in-JS-Bibliotheken.
• Kompiliert zu tatsächlichen CSS-Dateien, hat aber immer noch eine Laufzeit, wenn Sie dynamische Dinge tun (zumindest glaube ich das).
• Fühlt sich API-mäßig ähnlich wie styled-components an.
• Unterstützt Critical CSS.

Styled JSX

• Babel-Plugin, also definitiv eine Sache des Build-Prozesses.
• Die Verwendung eines <style jsx>-Tags direkt in der Komponente auf der Ebene der Verschachtelung, die Sie skopieren möchten, ist eine clevere API.
• Der Mangel an Verschachtelung ist nicht gut – man muss den Selektornamen oft wiederholen.

Goober

• Goober ist bemerkenswert, weil es einen fantastischen Namen hat und nur 1,25 KB groß ist, was ungefähr eine Größenordnung kleiner ist als alles andere.
• So ziemlich das gleiche Funktionsset wie styled-components und Emotion.

---

Interessante Ressourcen

• Shopifys Forschung, welche Bibliothek sie wechseln wollten.
• Facebook hat etwas in der Entwicklung (Konferenzvideo), aber nichts Open Source gemacht. Es heißt anscheinend "StyleX" – und es gibt bereits eine Bibliothek namens "Style9", die versucht, die Funktionen zu erfüllen, einschließlich nahezu Zero Runtime, atomare CSS-Ausgabe und die TypeScript-Erfahrung.
• Wenn Sie im atomaren Stil schreiben möchten, denken viele Leute, dass die Verwendung von Tailwind (wahrscheinlich mit Just-in-Time-Modus) der richtige Weg ist.
• Eine wahrscheinlich reaktionsfreudigere Version von Tailwind ist Styled System, das Stile als eine Reihe von vorkonfigurierten Props bereitstellt.
• Twin ist in der Art des Schreibens mit atomaren Stilen auf eine reaktionsfreudige Weise.
• Ich konnte Compiled für mich nicht zum Laufen bringen. Ich bin sicher, es lag nur an mir, aber ich habe aufgegeben. Es sieht für mich genauso aus wie die styled-components API, nur dass die Ausgabe atomare CSS-Klassen sind, was ziemlich cool erscheint.
• Die Seite CSS in JS Playground zeigt eine Reihe von Beispielen, darunter einige Bibliotheken, die hier nicht erwähnt werden, wie Fela, Radium und mehr. Mein Gott, gibt es viele davon.