Which one should we use? emotion vs styled-components

👨‍💻 Framework Development » Framework Design
1

Which one should we choose?

Emotion

https://emotion.sh

  • Documentation
    Their website is awesome. In my opinion, it is already up to the styled-components standard.
  • Features
    I like the css prop: https://emotion.sh/docs/css-prop
    I don’t like the JSX Pragma but that’s not needed when the babel plugin is used.
    And obviously styled.
    Past problems like global CSS have been solved.
  • React Concurrent
    Ready
  • Community
    • Github stars: 7000
    • Npm downloads: 900k
    • Contributors: 141
  • Bundle size
    60Kb (npx package-size @emotion/core,@emotion/styled --analyze)
  • Speed
    All the benchmarks I’ve found are from old versions. We can’t say one or the other is faster although historically emotion has been faster in the past.

Styled-Components

https://www.styled-components.com/

  • Documentation
    Their website is awesome.
  • Features
    I think the only way to use it is with styled.
  • React Concurrent
    Not ready, they still use findDomNode. It doesn’t seem like it is going to be fixed in the near future.
  • Community
    • Github stars: 22000
    • Npm downloads: 680k
    • Contributors: 229
  • Bundle size
    100kb (npx package-size styled-components --analyze)
  • Speed
    All the benchmarks I’ve found are from old versions. We can’t say one or the other is faster although historically emotion has been faster in the past.

Npm download comparison:

07
Screen Shot 2019-02-21 at 17.52.07.png1005×388 32.5 KB

https://npm-stat.com/charts.html?package=%40emotion%2Fcore&package=styled-components&from=2018-01-01&to=2019-02-17

2

Discuss and vote!

  • emotion
  • styled-components

0 voters

3

Another interesting resource:

4

It looks like speed is not something that we can take into accounts, as it’s not clear which one is faster now. They are probably quite similar:

5

I’d go with emotion. Actually I’d try to see if there is a pattern that would let us avoid using @emotion/styled and that we’d be happy with it as well. This way we’d be saving some bytes and also stop thinking about how to name every single styled element :smile:

6

I won’t do that. It’s already a widely known API and it would cause lots of problems to Frontity devs coming from styled-components and expecting it or reading about it in the emotion docs.

Other than that, I think I prefer emotion as well.

7

They could install the @emotion/styled package anyway right? I mean, we can specify this in the docs and let the developers choose if they want to install the styled version.

8

I don’t have a strong preference for any of those libraries. We used both of them and I didn’t notice any difference when using styled, their APIs are really similar.

If I have to choose one, I think I would opt for emotion (it has a smaller bundle size and is react-concurrent ready).

9

Ok, it looks like emotion is the winner! :tada: :tada:

10
11