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