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.

From learning to earning

Jobs that call for the skills explored in this talk.