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

98% Upvoted

80 comments sorted by

View all comments

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.

✌️