UVP*
and the future of
CSSinJS
* Unique Value Proposition
by Oleg Slobodskoi @oleg008
The world’s first
Project Messenger.
Web apps have complex interactions and maintain a state on the client, while web sites mostly render static information.
💡
UVP
Unique class name
Modules
Variables
etc.
Not a UVP
📦 Publishing
👔 Theming
🎏 Data Driven Styling
Agenda
+ 🚀 The Future
📦
Publishing
Almost 600K
📦
Quality Assurance for JS
Linters
Typings
Tests
Runtime Errors
etc.
Namespacing & specificity
at scale of npm?
😯
Package Block Element Modifier
.package---block--element-modifier {}😂
💡
CSSinJS is
Constraints Automation
Shadow DOM
Is it ready?
Is it well supported?
Is it fast?
😕
Always bet on JavaScript
Or whatever better language will replace it
😅
👔
Theming
Theme is a config, that
defines look and feel.
💡
Material-UI
React Components that Implement Google's Material Design.
Let's try 🍨 CSS!
🏰
Built-in Theme
Switch needs download
Redesign in multi-team setup
😔
CSS Variables are subject to the cascade, and inherit their value from their parent.
💡
🚙💥🚗
React's Context is like
CSS Variables
🤷♀️
Create a theme
Use context
Nesting
🎏
Data Driven Styling
State Based
User settings
API call
Time
etc.
Streaming animations
🎏
Google Material Motion for JS
No Transitions
No Keyframes
😔
❌
Reconciliation
Styles application
React Inline Styles
🐢
Extreme Perf
60 FPS
JavaScript
One thread
😱
CSSOM FTW
🏎
Create CSS Rule
Update CSS Rule
JSS Function Values
SCU
🤓
Observables
JSS 9 Example
Easy to support
Compatible
RxJS
Bacon.js
Kefir
etc.
Push based
Pointer events
Physics data
Streams coordination
Observable + CSSOM = ❤️
Decoupled
Lazy
🚀
Future
The biggest issue at scale we currently have with all CSSinJS implementations is that they are not shareable without the runtime.
💡
Interoperable
Style
Transfer
Format
Styled Components
Stylis
Styled Components
+ ISTF Prototype
W3C CSS Spec
👪
Interoperable
Publish with X,
use with Y
💅
Style
CSS
CSSinJS
🚀
Transfer
Compact
Fast
🎰
Format
For Machines,
not Humans
Interoperability
Performance
Dynamic capabilities
Cross-platform
The Goal
Thanks!
