Crafting Stateful Styles with State Machines

Explore innovative techniques for organizing styles, adding complex interactivity, and implementing meaningful transitions in user interfaces through the use of finite state machines in this conference talk from CSSConf BP 2019. Learn how to leverage ARIA, data-attributes, and CSS variables to enhance the maintainability, testability, and interactivity of your stylesheets. Discover the power of state machines in structuring stylesheets for dynamic and complex UIs, covering topics such as applying classes, user flows, states, drag and drop functionality, animations, mouse movement, state mapping, and state charts. Gain insights into the advantages and disadvantages of this approach, including its impact on complexity, and access valuable resources for further exploration of this decades-old concept applied to modern web development.

Introduction
Applying Classes
User Flows
States
Finite State Machines
Data Attributes
Switch Case Statements
XE
Drag and Drop
Previous State
Animations
Mouse Movement
Mouse Movement Example
State Mapping
State Charts
Hierarchy
Data attribute selectors
Data show data hide
Password form example
Visualization
Sketch Systems
Advantages
Disadvantages
Complexity
Resources