Skip to content
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Branch: master
Clone or download
Latest commit ea7989f Jan 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md Jan 11, 2019

README.md

styled-components-vs-emotion

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

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

It appears as though the main difference between the two is with styled-components you have one option: create a component with specific styling.

With emotion you have that same option, or you can pass the css to it. Here are some examples:

//Using styled-components (borrowed from styled-components website)
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

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

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

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

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. Here's an example pulled from this Medium article written by the creator of emotion:

const imageBase = css`
  width: 32px;
  height: 32px;
  border-radius: 50%;
`
const avatarStyle = css`
  composes: ${imageBase};
  border: 1px solid #7519E5
`

//This would generate a classname for the previous style AND also the new avatarStyle:
//ex. css-imageBase-12345 css-avatarStyle-12345

Comparison

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

Features

This information was taken from the documentation websites.

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

Stats

These numbers were pulled on July 13th, 2018.

Library Creation Date Last Updated (GitHub) Size Repo Stars # of Contributors Community Size (Spectrum)
styled-components August 16th, 2016 2 days ago 14.6kb 17,636 210 3,700
emotion May 27th, 2017 9 hours ago 8.9kb 4,307 97 56

Worthy Notes

  • 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.

You can’t perform that action at this time.