TLDR: The CSS-in-JS group has converged on a constant API.
Not so way back, a Fb engineer compiled an inventory of the accessible CSS-in-JS methodologies. It wasn’t brief:
aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, stylish, 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
Such a fragmented ecosystem was removed from interesting. Which one do you have to choose, (if any)?
GitHub stars are one helpful metric:
Nevertheless, GitHub stars say nothing a couple of challenge’s trajectory — maybe they had been amassed way back and the repo has since fallen out of favor or is not maintained. Glamor has loads of open points, and hasn’t seen a commit in over a yr. Its writer advises:
…it largely works, I am not going to do any main modifications… if you happen to want one thing extra fashionable, I might advocate emotion, it largely matches glamor’s api, and is actively maintained.
The equally named Glamorous was not too long ago deprecated with its writer additionally recommending customers change to Emotion:
On the time, Emotion had some options that Styled Parts didn’t. Since then, Styled Parts has made some massive bulletins.
styled-components v3.3.zero is out with first-class object help! 😍
A lot of folks have been asking for this, your needs have been heard! Shoutout to @probablyup for taking good care of this launch.
— Max Stoiber (@mxstbr) May 25, 2018
Emotion additionally gives a
css prop, which Styled Parts didn’t have, till…
🎉 Saying help for the
cssprop in styled-components! 🎉
This has been a very long time coming, hope y’all take pleasure in! ✨
Large shoutout to @satya164 for developing with the ingenious implementation! 👏
— Max Stoiber (@mxstbr) November 26, 2018
The rival CSS-in-JS libraries have stolen from one another till touchdown upon the identical characteristic set and the identical syntax — Emotion and Styled Parts have an nearly an identical API. What as soon as felt like a complete mess of competing methodologies and libraries now feels considerably secure. Even when CSS-in-JS hasn’t standardized on a dependency, it now has standardized a manner of doing issues — they’re simply applied in a different way:
Internally, fairly a bit. SC has a whole lot of complexity round organizing model tag order.
Re css prop: SC requires Babel plugin and makes use of the complete SC customized part creation. Emotion will skip the customized part if it will possibly and simply renders the ingredient with the className immediately
— Kye Hohenberger (@tkh44) December 7, 2018
Styled Parts is by far the most well-liked CSS-in-JS library, however Emotion has seen a speedy enhance in utilization.
Each are utilized by some main firms. Styled Parts are utilized by loads of giant firms, together with Bloomberg, Atlassian, Reddit, Goal, BBC Information, The Huffington Put up, Coinbase, Patreon, Vogue, Ticketmaster, Lego, InVision and Autodesk simply to call a couple of.
Emotion boasts fewer recognizable names, however has been not too long ago adopted by the New York Instances.
Nice article concerning the launch of our new Story designs on the NYT right this moment. It mentions our Shared Parts initiative – would have been inconceivable with out Emotion / CSS-in-JS. Absolute game-changer. Dwelling sooner or later. https://t.co/pZLDJjsbEr
— Scott Taylor (@wonderboymusic) May 8, 2018
Whereas these libraries actually do appear to be hottest amongst React customers, they can be utilized with different frameworks. Whereas they appear to have converged on the identical options ultimately, it’s tough to say whether or not that is the end point of CSS-in-JS, or whether or not we’ll see a continued evolution from right here.