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.

💡

Unique class name

Modules

Variables

 etc.

📦  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

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.

material-ui-next.com

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.

💡

MDN

🚙💥🚗

React's Context is like
CSS Variables

🤷‍♀️

Create a theme

Use context

Nesting 

🎏

Data Driven Styling

State Based

User settings

Weather

Your mood
etc.

Streaming animations

🎏

Google Material Motion for JS

https://github.com/material-motion/material-motion-js

😔

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

github.com/tc39/proposal-observable

JSS 9 Example

Easy to support

Compatible

RxJS
Bacon.js
Kefir
etc.

Push based

DOM events

Physics Engine

Streams coordination

Observable + CSSOM = ❤️

Decoupled

Lazy

Reusable

cssinjs.org/swinging-cat-rx

Oleh Aloshkin

Gregory Shehet

🚀

Future

The biggest issue at scale we currently have with all CSSinJS implementations is that they are not shareable without the runtime.

@oleg008

💡

Interoperable
Style
Transfer
Format

https://github.com/cssinjs/istf-spec

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

Performance

Interoperability

Dynamic features
Cross-platform

The Goal

@oleg008

Thanks!