Der fragmentierte, aber sich entwickelnde Zustand von CSS-in-JS

TLDR: Die CSS-in-JS-Community hat sich auf eine konsistente API geeinigt.

Vor nicht allzu langer Zeit hat ein Facebook-Ingenieur eine Liste der verfügbaren CSS-in-JS-Methoden zusammengestellt. Sie war nicht kurz

aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light, css-loader, css-ns, cssobj, cssx-loader, cxs, electron-css, emotion, es-css-modules, freestyler, glamor, glamorous, hiccup-css, hyperstyles, i-css, j2c, jsxstyle, linaria, nano-css, pre-style, radium, react-css-builder, react-css-components, react-css-modules, react-cssom, react-fela, react-free-style, react-inline-css, react-inline-style, react-inline, react-jss, react-look, react-native-web, react-statics-styles, react-styl, react-style, react-styleable, react-stylematic, react-theme, react-vstyle, reactcss, restyles, scope-styles, smart-css, stile-react-media-queries, stilr, stylable, style-it, styled-components, styled-jsx, styletron-react, styling, superstyle, typestyle, uranium

Ein derart fragmentiertes Ökosystem war alles andere als ansprechend. Welches sollte man wählen (wenn überhaupt)?

GitHub-Sterne sind eine nützliche Metrik

GitHub-Sterne sagen jedoch nichts über die *Entwicklung* eines Projekts aus – vielleicht wurden sie schon vor langer Zeit gesammelt und das Repository ist seitdem aus der Mode gekommen oder wird nicht mehr gepflegt. Glamor hat viele offene Probleme und hat seit über einem Jahr keinen Commit mehr gesehen. Sein Autor rät

…es funktioniert meistens, ich werde keine größeren Änderungen vornehmen… wenn Sie etwas Moderneres benötigen, würde ich emotion empfehlen, es entspricht weitgehend der API von glamor und wird aktiv gepflegt.

Das ähnlich benannte Glamorous wurde kürzlich eingestellt, und sein Autor empfiehlt den Benutzern ebenfalls den Wechsel zu Emotion

Zu diesem Zeitpunkt hatte Emotion einige Funktionen, die Styled Components nicht hatte. Seitdem hat Styled Components einige große Ankündigungen gemacht.

Styled Components verkauft sich als die CSS-in-JS-Bibliothek für Leute, die CSS *mögen*. Styled Components gewann an Popularität durch die Nutzung von Tagged Template Literals – die es Entwicklern ermöglichten, *einfach CSS* in der ihnen bereits bekannten Syntax zu schreiben, aber innerhalb von JavaScript-Dateien. Während dies sich als beliebt erwiesen hat, ziehen es einige Entwickler vor, [Stile als JavaScript-Objekte zu schreiben. Emotion bot Flexibilität – Entwickler konnten wählen, wie sie ihre Stile schreiben wollten. Styled Components folgte schließlich diesem Beispiel.

styled-components v3.3.0 ist da mit erstklassiger Objektunterstützung! 😍

Viele Leute haben danach gefragt, eure Wünsche wurden gehört! Shoutout an @probablyup für die Übernahme dieser Veröffentlichung.

👉 https://#/yOHWg78nF4 pic.twitter.com/Ic8fZdAFVs

— Max Stoiber (@mxstbr) 25. Mai 2018

Emotion bietet auch eine css-Prop, die Styled Components nicht hatte, bis…

🎉 Ankündigung der Unterstützung für die css-Prop in styled-components! 🎉

Das hat lange gedauert, ich hoffe, ihr genießt es! ✨

👉 https://#/DMdrG6uviZ

Ein riesiges Shoutout an @satya164 für die geniale Umsetzung! 👏

— Max Stoiber (@mxstbr) 26. November 2018

Die rivalisierenden CSS-in-JS-Bibliotheken haben voneinander gestohlen, bis sie bei demselben Funktionsumfang und derselben Syntax landeten – Emotion und Styled Components haben eine fast identische API. Was einst wie ein totales Durcheinander konkurrierender Methodologien und Bibliotheken erschien, fühlt sich jetzt einigermaßen stabil an. Auch wenn CSS-in-JS keine Abhängigkeit standardisiert hat, hat es nun eine Arbeitsweise standardisiert – sie werden nur unterschiedlich implementiert.

Intern ziemlich viel. SC hat eine Menge Komplexität rund um die Organisation der Reihenfolge von Style-Tags.
Betreff css-Prop: SC benötigt ein Babel-Plugin und nutzt die gesamte SC-Erstellung einer benutzerdefinierten Komponente. Emotion überspringt die benutzerdefinierte Komponente, wenn es kann, und rendert das Element einfach direkt mit der className.

— Kye Hohenberger (@tkh44) 7. Dezember 2018

Styled Components ist bei weitem die beliebteste CSS-in-JS-Bibliothek, aber Emotion hat einen rasanten Anstieg der Nutzung verzeichnet.

https://npmcharts.com/compare/glamor,aphrodite,radium,glamorous,styled-components,jss,emotion?interval=30

Beide werden von einigen großen Unternehmen genutzt. Styled Components wird von vielen großen Unternehmen genutzt, darunter Bloomberg, Atlassian, Reddit, Target, BBC News, The Huffington Post, Coinbase, Patreon, Vogue, Ticketmaster, Lego, InVision und Autodesk, um nur einige zu nennen.

Emotion weist weniger bekannte Namen auf, wurde aber kürzlich von der New York Times übernommen.

Großartiger Artikel über die Einführung unserer neuen Story-Designs bei der NYT heute. Er erwähnt unsere Initiative für Shared Components – ohne Emotion / CSS-in-JS wäre das unmöglich gewesen. Absoluter Game-Changer. Leben in der Zukunft. https://#/pZLDJjsbEr

— Scott Taylor (@wonderboymusic) 8. Mai 2018

---

Während diese Bibliotheken tatsächlich am beliebtesten bei React-Nutzern zu sein scheinen, können sie auch mit anderen Frameworks verwendet werden. Obwohl sie sich scheinbar endlich auf dieselben Funktionen geeinigt haben, ist schwer zu sagen, ob dies der *Endpunkt von CSS-in-JS* ist oder ob wir von hier aus eine kontinuierliche Weiterentwicklung sehen werden.