Ableton Styles: CSS in QML - Video

This video presents a custom CSS-like styling system for QML applications, developed at Ableton for their complex music software interfaces. The speaker addresses the limitations of traditional theming approaches like theme singletons and predefined styles, which become unmaintainable as applications grow in complexity. The solution implements CSS-style selectors, cascading inheritance, and specificity rules as a QML extension plugin using only public APIs. The system uses attached properties to bind CSS properties to QML components, supports CSS class names and multiple class assignments, and includes a style engine that can dynamically reload stylesheets. This approach enables live theme switching, integrates with CSS preprocessors like SASS, and creates a designer-friendly workflow where visual changes can be made without touching QML code.