└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # styled-components-vs-emotion
2 | _Last updated by @JuanmaMenendez on October 25th, 2019_
3 | A short doc comparing the popular CSS-in-JS libraries `styled-components` and `emotion`. For a more detailed comparison, see:
4 | * [this Spectrum thread](https://spectrum.chat/styled-components/general/styled-components-vs-emotion~47206c1b-a688-424e-9e96-6f265993587e) (Aug 2018 - Mar 2019)
5 | * [this shorter Frontity discussion](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27)
6 |
7 | ## Brief Description
8 |
9 | ### [`styled-components`](https://www.styled-components.com/)
10 | >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!
11 |
12 | ### [`emotion`](https://emotion.sh/)
13 | >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.
14 |
15 | ### Functionality
16 | The APIs of the two libraries have [converged over time](https://css-tricks.com/the-fragmented-but-evolving-state-of-css-in-js/). Both let you create a component with styling specified via CSS, or via object notation. (Styled Components added the latter capability [in May 2018](https://twitter.com/mxstbr/status/999918627997470724).)
17 |
18 | #### `styled-components`
19 |
20 | ```javascript
21 | // CSS syntax in tagged template literal
22 | const Title = styled.h1`
23 | font-size: 1.5em;
24 | text-align: center;
25 | color: palevioletred;
26 | `
27 | render(Hiya!)
28 |
29 | // Object syntax
30 | const button = styled.button({
31 | fontSize: '1.5em',
32 | textAlign: 'center',
33 | color: 'palevioletred'
34 | });
35 | ```
36 |
37 | #### `emotion`
38 |
39 | ```javascript
40 |
41 | // CSS syntax in tagged template literal
42 |
43 | const Button = styled.button`
44 | padding: 32px;
45 | background-color: hotpink;
46 | font-size: 24px;
47 | border-radius: 4px;
48 | color: black;
49 | font-weight: bold;
50 | &:hover {
51 | color: white;
52 | }
53 | `
54 |
55 | render()
56 |
57 | ---
58 |
59 | render(
60 |
)
79 |
80 | ```
81 |
82 |
83 | ## Comparison
84 | Here's how the two libraries compare based on features and stats:
85 |
86 | ### Features - at parity
87 | This information was taken from the documentation websites.
88 |
89 | Library | Attaching Props? | Media Queries? | Global Styles? | Nested Selectors? | Server Side Rendering? | Theming Support? | Composition?
90 | --- | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
91 | `styled-components` | Yes | Yes| Yes | Yes | Yes | Yes| Yes
92 | `emotion` | Yes | Yes | Yes | Yes | Yes | Yes | Yes
93 |
94 | ### Stats
95 | These numbers were pulled on October 18th, 2019.
96 |
97 | Library | Creation Date | Last Updated (GitHub) | Size | Repo Stars | # of Contributors | Community Size (Spectrum)
98 | --- | --- | --- | --- | --- | --- | --- |
99 | [`styled-components`](https://github.com/styled-components/styled-components) | August 16th, 2016 | 8 days ago | ? 14.6kb ? | 26,197 | 252 | [10,113](https://spectrum.chat/styled-components)
100 | [`emotion`](https://github.com/emotion-js/emotion) | May 27th, 2017 | 6 days ago | ? 8.9kb ? | 9,118 | 184 | [479](https://spectrum.chat/emotion)
101 |
102 | ### Worthy Notes
103 |
104 | * `emotion` is [ready](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27/8) for [React Concurrent mode](https://dev.to/pomber/about-react-suspense-and-concurrent-mode-21aj) and it has a smaller bundle size
105 | - `emotion` [performed faster](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md) 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](https://twitter.com/_philpl/status/1017312352641933317).**
106 | - Kent C. Dodds recommended `emotion` over `styled-components` in [this tweet](https://twitter.com/kentcdodds/status/994230853189320705) saying that it's smaller and faster.
107 |
108 | ### Contributions
109 | 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.
110 |
111 |
--------------------------------------------------------------------------------