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

• Hidden knowledge
• Unexpected behaviour
• https://codesandbox.io/s/1rm705jnlq

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

@oleg008