Crafting Stateful Styles

on YouTube ↗18m

" summary

Argues that styling belongs to explicit finite state machines rather than scattered classes, using data-state attribute + data-transition to guarantee a single active state and express transitions. Uses XState and the XState visualizer to map machine config to UI graphs, ARIA and CSS variables for accessibility and theming, and demos a CSS-only calendar, a drag‑select weekday editor and animated nav transitions — all implemented and working in the demos.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 3:01add more than one check box
3. 10:19customize the styles of your stateful dynamic css
4. 13:48add a little bit of javascript
5. 16:31write a little bit of prototype code

" related talks

• 29mCrafting Stateful Styles with State MachinesDavid Khourshid · CSSConf Budapest 2019
• 29mCSS Architecture for Modern Web ApplicationsMike Riethmuller · CSSConf Budapest 2019
• 47mStyle Is SubstanceAmelia Bellamy-Royds · Inclusive Design 24 (#id24) 2016
• 31mMaintainable Styles- That's a Thing?Alyssa Nicoll · Reliable Web Summit 2021
• 07mData Driven StylingOleg Slobodskoi · React Day Berlin 2017
• 24mCSS in a Components WorldIdo Rosenthal · You Gotta Love Frontend 2017
• 29mStyling with StringsSimurai · CSSConf Australia 2014
• 30mDynamic Styling Systems with ReactKhachatur Virabyan | ReactConfAM19 · React Conf Armenia 2019