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