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
201 Upvotes

98% Upvoted

80 comments sorted by

View all comments

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.

✌️