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