This talk is about a Unique Value Proposition of CSSinJS. Instead of talking about all the benefits we get by using a powerful language like JavaScript for styles generation, I will focus on it's unique benefits, things which can't be done using preprocessors at build time. Also I will talk about issues we have with CSSinJS and about a project that can fix a lot of them.

1. UVP*
and the future of
CSSinJS
* Unique Value Proposition
by Oleg Slobodskoi @oleg008

3. The world’s first
Project Messenger.

4. “ Web apps have complex
interactions and maintain a state on
the client, while web sites mostly
render static information.
💡

5. UVP

6. Unique class name
Modules
Variables
etc.
Not a UVP

7. 📦 Publishing
👔 Theming
🎏 Data Driven Styling
Agenda
+ 🚀 The Future

8. 📦
Publishing

9. Almost 600K
📦

11. Quality Assurance for JS
Linters
Typings
Tests
Runtime Errors
etc.

13. Namespacing & specificity
at scale of npm?
😯

14. Package Block Element Modifier
.package---block--element-modifier {}
😂

15. 💡
“ CSSinJS is
Constraints Automation

16. Shadow DOM
Is it ready?
Is it well supported?
Is it fast?
😕

17. Always bet on JavaScript

18. Or whatever better
language will replace it
😅

19. 👔
Theming

20. “ Theme is a config, that
defines look and feel.
💡

21. Material-UI
React Components that Implement
Google's Material Design.
material-ui-next.com

23. Let's try 🍨 CSS!

24. 🏰
Built-in Theme
Switch needs download
Redesign in multi-team setup
😔

25. “ CSS Variables are subject to
the cascade, and inherit their
value from their parent.
💡
MDN

26. 🚙💥🚗

28. React's Context is like
CSS Variables
♀

29. Create a theme

30. Use context

31. Nesting

32. 🎏
Data Driven Styling

33. State Based
User settings
Weather
Your mood
etc.

34. Streaming animations
🎏

35. Google Material Motion for JS
https://github.com/material-
motion/material-motion-js

36. No Transitions
No Keyframes
😔
❌

37. Reconciliation
Styles application
React Inline Styles
🐢

38. Extreme Perf
60 FPS
JavaScript
One thread
😱

39. CSSOM FTW
🏎

40. Create CSS Rule

41. Update CSS Rule

42. JSS Function Values

43. SCU
🤓

45. Observables
github.com/tc39/proposal-observable

46. JSS 9 Example

47. Easy to support

48. Compatible
RxJS
Bacon.js
Kefir
etc.

49. Push based
DOM events
Physics Engine
Streams coordination

50. Observable + CSSOM = ❤
Decoupled
Lazy
Reusable

51. cssinjs.org/swinging-cat-rx
Oleh Aloshkin
Gregory Shehet

52. 🚀
Future

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

54. Interoperable
Style
Transfer
Format
https://github.com/cssinjs/istf-spec

55. Styled Components Stylis
Styled Components
+ ISTF Prototype
W3C CSS Spec

56. 👪
Interoperable
Publish with X,
use with Y

57. 💅
Style
CSS
CSSinJS

58. 🚀🚀
Transfer
Compact
Fast

59. 🎰🎰
Format
For Machines,
not Humans

62. Performance
Interoperability
Dynamic features
Cross-platform
The Goal

63. @oleg008
Thanks!