All Projects โ†’ jsjoeio โ†’ Styled Components Vs Emotion

jsjoeio / Styled Components Vs Emotion

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

Projects that are alternatives of or similar to Styled Components Vs Emotion

Twin.macro
๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: โœญ 5,137 (+2418.14%)
Mutual labels:  styled-components, css-in-js, emotion
React Next Boilerplate
๐Ÿš€ A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: โœญ 129 (-36.76%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐Ÿ’…
Stars: โœญ 428 (+109.8%)
Mutual labels:  styled-components, css-in-js, emotion
Xstyled
A utility-first CSS-in-JS framework built for React. ๐Ÿ’…๐Ÿ‘ฉโ€๐ŸŽคโšก๏ธ
Stars: โœญ 1,835 (+799.51%)
Mutual labels:  styled-components, css-in-js, emotion
Onno
Responsive style props for building themed design systems
Stars: โœญ 95 (-53.43%)
Mutual labels:  styled-components, css-in-js, emotion
satchel
The little bag of CSS-in-JS superpowers
Stars: โœญ 14 (-93.14%)
Mutual labels:  styled-components, emotion, css-in-js
Next Dark Mode
๐ŸŒ‘ Enable dark mode for Next.js apps
Stars: โœญ 133 (-34.8%)
Mutual labels:  styled-components, css-in-js, emotion
Design System Utils
๐Ÿ‘ฉโ€๐ŸŽจ Access your design tokens with ease
Stars: โœญ 465 (+127.94%)
Mutual labels:  styled-components, css-in-js, emotion
Horror
๐Ÿ˜ฑ React HTML elements with CSS-in-JS
Stars: โœญ 78 (-61.76%)
Mutual labels:  styled-components, css-in-js, emotion
Styled System
โฌข Style props for rapid UI development
Stars: โœญ 7,126 (+3393.14%)
Mutual labels:  styled-components, css-in-js, emotion
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components โ€” Standard size from Chrome DevTools.
Stars: โœญ 33 (-83.82%)
Mutual labels:  styled-components, emotion, css-in-js
Goober
๐Ÿฅœ goober, a less than 1KB ๐ŸŽ‰ css-in-js alternative with a familiar API
Stars: โœญ 2,317 (+1035.78%)
Mutual labels:  styled-components, css-in-js, emotion
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: โœญ 52 (-74.51%)
Mutual labels:  styled-components, emotion, css-in-js
Grid
This package has moved and renamed
Stars: โœญ 2,079 (+919.12%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Ppx
Typed styled components in Reason, OCaml and ReScript
Stars: โœญ 236 (+15.69%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: โœญ 761 (+273.04%)
Mutual labels:  styled-components, css-in-js, emotion
Css In React
๐Ÿญ CSS in React - Learn the best CSS in JS frameworks by example
Stars: โœญ 101 (-50.49%)
Mutual labels:  styled-components, css-in-js, emotion
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: โœญ 167 (-18.14%)
Mutual labels:  styled-components, css-in-js, emotion
Css In Js
A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js
Stars: โœญ 127 (-37.75%)
Mutual labels:  comparison, css-in-js
Css In Js
Autocomplete React Native / JS Styles and converting plain CSS to JS styles
Stars: โœญ 192 (-5.88%)
Mutual labels:  styled-components, css-in-js

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:

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].