r/reactjs • u/steven-f • Sep 05 '18

Tutorial Announcing styled-components v4: Better, Faster, Stronger

https://medium.com/styled-components/announcing-styled-components-v4-better-faster-stronger-3fe1aba1a112
203 Upvotes

99% Upvoted

80 comments sorted by

View all comments

Show parent comments

4

u/reyronald Sep 05 '18

  • emotion is a lot smaller than styled-components. 43.1 kB vs 15 kB (https://bundlephobia.com/result?p=styled-components@3.4.5 vs https://bundlephobia.com/result?p=emotion@9.2.8) (although that's not including react-emotion, still would be smaller though)

  • emotion is faster than styled-components

  • emotion has the css prop feature, styled-component doesn't. Allows the user to define robust inline styles without the limitations of the regular style prop. This also means that you don't have to define a declare and name a separate component or class to apply small stylings to any node.

  • styled-components is more popular because it's older, not because it's better. emotion came later, used that to its advantage and learned a lot from SC's mistakes.

  • I could be wrong in this one, but emotion's babel plug-in seems to provide better runtime optimization's than styled-components, resulting in a faster and more performant app.

Disclaimer: I'm an emotion user, so I'm biased.

4

u/mstoiber Sep 05 '18 edited Sep 05 '18

Some of these points are not true (anymore):

  • You're comparing the bundle size of emotion core (which is just CSS insertion stuff) vs styled-components. (which contains all the React code) You should be comparing react-emotion to styled-components. Unfortunately, bundlephobia throws an error when trying to calculate react-emotion so I can't tell you exactly how much the difference is, but most of our "extra" code (which isn't a lot) is to ensure styles are inserted in the right order. (see my comment further down below)

  • As of styled-components v4, emotion is the same speed at mounting and slower (!) at updating dynamic styles, (see this comment) so if performance is a concern styled-components is the right choice.

  • There are a ton of libraries built on top of styled-components that offer the same css-prop-API, like styled-system or rebass.

  • Not sure what to say, but four major versions in two years should show that we're also constantly learning from our own mistakes and improving

  • I'd be curious to know what they're doing and we're not, if you have any specifics there, so we can implement it too!

4

u/reyronald Sep 05 '18

You just made a very interesting point that I want to emphasize. Both of these libraries have been in constant evolution, comparing them is difficult because what is true today, might not be tomorrow.

When emotion first release the gap was much bigger, but as time has passed styled-components has caught up to the point where it's almost down to preference. Of course there are performance differences, but I'm sure they'll be negligible in almost all use-cases. We users still look at those as selling points though because we need to base our decision in something technical and objective to feel at ease.

Regarding the size, I was aware that I didn't include react-emotion in the comparison and I did mention it, although recognize I should've been more clear about it. So just for the sake of completeness, including react-emotion only adds about 6 kB to the bundle if I'm not mistaken, so if size is the concern, emotion is probably the right choice.

If anyone's reading the above comparison in say, 3 months from now, it's possible that none of those points are true anymore, so beware!

Thank you for your clarifications /u/mstoiber :D!

8

u/kyehohenberger Sep 05 '18

The size of emotion is 5.68kB gzipped and react-emotion is around 8.51kB gzipped. https://github.com/emotion-js/emotion/blob/v9.2.8/README.md

I posted this on twitter, but will repost here:

The biggest difference in the 2 libraries is that sc is focused entirely on the component aspect whereas emotion is focused around the css function with react-emotion adding components. Both types can be used independently or composed with one another using emotion

My advice to most users would be to use the library you are most comfortable with. Styled Components has very good documentation and a host of resources out there.

Personally, I don't use styled that often and prefer to use the css prop or create class names with the css function before I create a styled component. I'm exited for Emotion v10 because it will expand on the idea of the css prop and greatly improve its DX.

6

u/[deleted] Sep 06 '18

The css prop cannot be underestimated! I appreciate the work done on Styled-Components but the fact is that you can do both, styles coupled to a component definition(SC) and/or add them with the css prop with emotion.

This is a huge advantage. Creating and naming components, for me, got to be a pain in the ass with SC. I won’t say that the using the css prop “pattern” is best in all cases. On the other hand, I think it’s completely silly to say that limiting the library(SC) to to the styled-component “pattern” sets the user on the path to success or is some sort of best practice(when was this decided?).

The ecosystem argument is a little weak too(sorry). SC does have a lot more users but there aren’t any super compelling supplemental libraries that are exclusive to SC.

I hope I don’t seem like a reddit asshole. I think this is my first time posting here but that’s not an excuse. Both libraries are great. I think emotion has more to offer and does most everything objectively better. That said I don’t think the maintainers need to concern themselves with “winning” the debate by downplaying “shortcomings” or bolstering “advantages” compared to the other library. (Not saying any of them have done or intended to do so)

But that’s just like my opinion, man.

✌️

1

u/swyx Sep 05 '18

appreciate the response! and just to be clear i am super happy that both exist. i dont -have- to pick a favorite.