Tradeoffs of
CSS-in-JS

Hi, I am Oleg
I work for

Social impact

  • Industry-wide change
  • CSS Developers
  • Unclear use cases

CSS-in-JS
!=
CSS-in-JS

Runtime cost

  • Parsing of template stringsĀ 

  • Optimisations
  • Dynamic Styles rendering
  • Unique class names algorithms
  • Framework integration

1. Runtime-only

  • FOUC

  • Placeholders

  • High TTI

  • Runtime cost

2. Critical CSS + runtime

  • Requires SSR

  • Runtime cost

3. Build-time extraction

  • Blocking link tag

  • No state-based styling syntax

  • No dynamic theming w/o custom props

  • Non-deterministic specificity w/ page based bundle splitting

4. Build-time extraction
+ Critical CSS

  • No state-based styling syntax

  • No dynamic theming w/o custom props

  • Non-deterministic specificity w/ page based bundle splitting

Accessibility

Easy to introduce perf issues!

Render-blocking bundle +
Low-end device +
Unstable Connection

Server-side Rendering

  • CPU intensive HTML rendering
  • CSS extraction overhead
  • Not always cacheable

Rendering black box

Learning curve

  • Variables
  • Template strings
  • Interpolations
  • Objects
  • Functions
  • Conditionals
  • API

Interoperability

  • Incompatible APIs
  • Can't be shared without the lib
  • Hard to unify and standardize

Thank You

deck

By Oleg Slobodskoi

deck

  • 56
Loading comments...

More from Oleg Slobodskoi