Data Driven Styling

on YouTube ↗07m

" summary

Claims that dynamic styling using CSSOM plus JSS 9 observables removes inline-style overhead and lets JavaScript drive per-frame updates at native rates (demo targets 60fps). Shows a head-to-head: GSS-rendered objects keep higher FPS while inline-style React updates drop frames. Adds an observables interface so pointer/physics streams feed CSS rules lazily and efficiently. Rebuilds a swinging-cat animation without keyframes to prove it works and publishes an interactive URL to try it live.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:31State Based Styling
3. 1:10Streaming Animations
4. 2:35Extreme Perf
5. 3:22JSS Function Values
6. 4:56Observables
7. 5:27JSS 9 Example

" related talks

• 31mUnique Value Proposition of CSSinJS and the FutureOleg Slobodskoi · ReactiveConf 2017
• 39mUVP of CSSinJS and the futureOleh Slobodskoi · Frontend fwdays'17
• 39mCSS. Under the hood.Kasia Jastrzębska · React Alicante 2019
• 33mThe past, present and future of CSS-in-JSMax Stoiber · Agent Conf 2020
• 23mCSS-in-JSMax Stoiber · ReactConf AU 2020
• 26mCSS Houdini & The Future of StylingUna Kravets · JSConf EU 2019
• 27mCSS Variables A New HopeMauricio Palma · CSSConf Budapest 2017
• 31mCSS in JS: Is it worth the hypeKathrin Holzmann · JSUnconf 2019