jsjoeio/styled-components-vs-emotion

a short doc comparing the popular CSS-in-JS libraries styled-components and emotion

styled-components-vs-emotion

Last updated by @JuanmaMenendez on October 25th, 2019 A short doc comparing the popular CSS-in-JS libraries styled-components and emotion. For a more detailed comparison, see:

• this Spectrum thread (Aug 2018 - Mar 2019)
• this shorter Frontity discussion

Brief Description

styled-components

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

emotion

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

Functionality

The APIs of the two libraries have converged over time. Both let you create a component with styling specified via CSS, or via object notation. (Styled Components added the latter capability in May 2018.)

styled-components

// CSS syntax in tagged template literal
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

// Object syntax
const button = styled.button({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
});

emotion

// CSS syntax in tagged template literal

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>Hey! It works.</Button>)

---

render(
  <h1
    className={css`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `}
  >
    Hiya!
  </h1>
)

// Object syntax
const titleStyles = css({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
})

render(<h1 className={titleStyles}>Hiya!</h1>)

Comparison

Here's how the two libraries compare based on features and stats:

Features - at parity

This information was taken from the documentation websites.

Library	Attaching Props?	Media Queries?	Global Styles?	Nested Selectors?	Server Side Rendering?	Theming Support?	Composition?
styled-components	Yes	Yes	Yes	Yes	Yes	Yes	Yes
emotion	Yes	Yes	Yes	Yes	Yes	Yes	Yes

Stats

These numbers were pulled on October 18th, 2019.

Library	Creation Date	Last Updated (GitHub)	Size	Repo Stars	# of Contributors	Community Size (Spectrum)
styled-components	August 16th, 2016	8 days ago	? 14.6kb ?	26,197	252	10,113
emotion	May 27th, 2017	6 days ago	? 8.9kb ?	9,118	184	479

Worthy Notes

• emotion is ready for React Concurrent mode and it has a smaller bundle size

• emotion performed faster than styled-components back in March 12th when a comparison was done over all CSS-in-JS libraries. However, maintainers of styled-components are actively improving performance and say they are within 0.5-2x emotion's times.
• Kent C. Dodds recommended emotion over styled-components in this tweet saying that it's smaller and faster.

Contributions

If you see a typo or something that is out-of-date or incorrect, please submit a PR and I will happily update this doc.

styled-components-vs-emotion's Issues

Nice write-up - maybe consider putting onto Medium?

Thanks for the write-up :)

Possible to update these values with latest versions?

Styled-components v5 now claims to be much faster than when these tests were run. Are you aware of any more updated benchmarks?

Kent Dodds actually recommended to deprecate Glamorous

Hey,

Thank you for this comparison, quite helpful. Just want to point out that this statement under Worthy Notes, is not entirely correct.

Kent C. Dodds recommended emotion over styled-components in this tweet saying that it's smaller and faster.

In the Tweet, he makes reference to Glamorous(A library he owns and maintained). He advised users to move to emotion since it's quite simply, better.

Cheers.

Update text to reflect Styled-Component "composition" support

In the text you mention: "In addition, classNames used in emotion are powerful because the css API has a special property called composes that allows you to create new styles composed with previously created styles"

With Styled-Components that is possible as well. please see: https://www.styled-components.com/docs/advanced#referring-to-other-components