Maximilian Heinrich

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.

Component styling in a JS world — evolve your mental model
#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.

Matching moments

The industry's focus on frameworks over web fundamentals
20:28 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Simplifying development with Lit and Stencil
37:17 MIN

Simplifying development with Lit and Stencil

Extending HTML with Web Components

Creating modern code islands with web components
11:13 MIN

Creating modern code islands with web components

Defeat that legacy monster! Guerilla refactoring with web standards

Styling applications with JavaScript and Flexbox
10:53 MIN

Styling applications with JavaScript and Flexbox

Making the switch from web to mobile development

Using Web Components and Svelte as an alternative
04:03 MIN

Using Web Components and Svelte as an alternative

On tour with heroes == Moving from Angular to WebComponents

Conclusion and when to use lightweight frameworks
36:52 MIN

Conclusion and when to use lightweight frameworks

Frameworkless: How to use Web-Components in production?

The technical stack for a multi-framework component library
06:15 MIN

The technical stack for a multi-framework component library

DB UX Design System – How we’ve open sourced our largest inner source project

Audience Q&A on patterns, typescript, and frameworks
25:14 MIN

Audience Q&A on patterns, typescript, and frameworks

10 must-know design patterns for JS Devs

Featured Partners

Related Videos

See all videos
Frameworkless: How to use Web-Components in production?46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

The Lean Web46:46

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As 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...
The HTML Elements That You’re Probably Over-Engineering
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every 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...
Building a "shoutout" component in plain HTML/CSS/JavaScript
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For 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...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.

Lead Full-Stack Engineer

Lead Full-Stack Engineer

Hubert Burda Media
München, Germany

€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1