Component styling in a JS world — evolve your mental model

Stop fighting with brittle, untyped class names. A declarative `variants` API offers a type-safe way to style components, complete with autocomplete.

#1about 4 minutes

Improving developer experience with connected tooling

Modern frameworks and tools should improve developer experience by creating interconnected, frictionless workflows.

#2about 5 minutes

The friction and errors of traditional CSS workflows

Separating component logic from styling files leads to context switching, potential for errors, and class names acting as disconnected magic strings.

#3about 3 minutes

Introducing modern zero-runtime CSS-in-JS libraries

New CSS-in-JS libraries like Stitches and vanilla-extract overcome historical performance issues by offering zero-runtime overhead and better tooling integration.

#4about 9 minutes

Live demo creating styled components with Stitches

A live coding demonstration shows how to use the `styled` function in Stitches to create type-safe, styled components directly in JavaScript.

#5about 6 minutes

Building powerful component variants with type safety

The `variants` API in Stitches allows for creating multiple component variations with type-safe props and autocomplete, simplifying conditional styling.

#6about 2 minutes

A new mental model for unified component development

CSS-in-JS unifies HTML, CSS, and JavaScript, creating a single, coherent mental model where styling is an integral part of the component.

#7about 12 minutes

Q&A on Stitches, performance, and alternatives

The speaker answers audience questions comparing Stitches to other tools, discussing performance, theming, responsive design, and framework compatibility.