emotion

Balram Singh

@erbalramsingh

in/balramsingh

The Next Generation of CSS-IN-JS

emotion.sh

balramsingh.in

How we use SASS

@erbalramsingh

Why #no-sass

@erbalramsingh

Why #no-sass

@erbalramsingh

  • Multiple versions of the same component caused style clashes.

 

 

 

  • BEM syntax was annoying.
  • Bloated CSS output, nested selector overload,  unused css on a given page.
  • Needed critical CSS
  • SASS compilation is slow due to a few factors (theming, static assets etc)
  • node-sass was problematic on different platforms (e.g. windows)

Why #no-sass

@erbalramsingh

  • Need to keep component consistent.
  • Not easy to upgrade many components
  • Performance was critical
  • Need to have a relatively future proof framework
  • Need to have better developer experience

Let's experiment

@erbalramsingh

@erbalramsingh

styled-components

styled-components

@erbalramsingh

Text

styled-components

@erbalramsingh

  • Most Popular CSS-in-JS framework
  • Easier to delete unused CSS (tied to components)
  • Good performance

Props

Cons

  • Bundle size is not great at times
  • JSX no longer semantic (relies on good naming)

@erbalramsingh

Glamourous

Text

@erbalramsingh

Glamourous

@erbalramsingh

Glamourous

Cons

  • Quickly became clear the author (Kent C Doddas) was in favour of emotion (eventually deprecated)

Pros

  • Easier to delete unused CSS
  • Good Performance + bundle size
  • Extraction of CSS

@erbalramsingh

Emotion

Balram Singh

@erbalramsingh

in/balramsingh

emotion.sh

@erbalramsingh

Emotion

@erbalramsingh

Emotion

@erbalramsingh

Emotion

Cons

  • Docs not as good as something like styled components (improving)

Pros

  • Popular CSS-in-JS framework
  • Excellent performance
  • Don't need to clutter JSX with styled components
  • Supports composition, nested selector and global styles
  • Supports server side rendering
  • Plays nice with legacu sass components

@erbalramsingh

Demo

https://codesandbox.io/s/emotion-z92tu?fontsize=14

@erbalramsingh

Thank You

www.balramsingh.in

Emotion - CSS-in-JS library

By Balram Singh

Emotion - CSS-in-JS library

CSS-in-JS library for high performance style composition

  • 950