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.
Related jobs
Jobs that call for the skills explored in this talk.
The HTML Elements That You’re Probably Over-EngineeringAs frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML.
The mental models that come with using state management in React, Vue and o...
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScriptEvery Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTMLInside last week’s Dev Digest 215 .
🗿 Make AI talk like a caveman
🧠 A guide to context engineering for LLMs
🤖 Simon Willison on agentic engineering
🔐 Axios supply chain attack post mortem
🛡️ Designing AI agents to resist prompt injection
🎨 HTML in c...
SciChart
The Fastest JavaScript Charts - Built for React and BeyondFor most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues.
That’s where S...
From learning to earning
Jobs that call for the skills explored in this talk.
46:39
41:54
46:46
43:08
30:40
32:56
40:05
14:44
