WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 24, 2021

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Stop juggling fragmented folders and fragile CSS classes. It is time to evolve your mental model. Modern CSS-in-JS tools deliver zero-runtime, type-safe styling that transforms your developer experience.

Pause
Mute Enter Fullscreen
#1 about 3 min

Importance of developer experience and interconnected workflow tools

Cohesive and efficient tooling directly improves overall developer experience and product quality.

#2 about 2 min

Principles for efficient systems and removing workflow barriers

Avoiding magic strings and reducing development hurdles leads to much more reliable codebases.

#3 about 4 min

Challenges of separating components and standard CSS files

Splitting business logic and styles across multiple directories causes friction and increases error potential.

#4 about 2 min

Adopting new mental models for building JavaScript components

New thinking tools can bridge the conceptual gap between traditional HTML structure and CSS styling.

#5 about 3 min

Evolution of CSS-in-JS and modern zero-runtime libraries

Modern libraries like Stitches and Vanilla Extract solve historical performance and developer tooling issues.

#6 about 9 min

Building basic components with the Stitches style function

Defining styles directly within JavaScript component files eliminates the need for external stylesheets.

#7 about 4 min

Implementing component variants and default styling configurations

Configuring size variants natively prevents the need for manually concatenating complex conditional class strings.

#8 about 3 min

Extending components and reusing style tokens efficiently

Overriding component styles and leveraging JavaScript objects provides a highly efficient way to share design tokens.

#9 about 3 min

Consolidating styling logic into a single cohesive system

Keeping styles deeply integrated within components drastically reduces workflow friction and naming errors.

#10 about 12 min

Audience questions on performance, comparisons, and responsive styling

Discussions cover performance benchmarks, server-side rendering support, and responsive styling in modern CSS-in-JS frameworks.

Matching moments

8:22 min

Why understanding core CSS still matters for developers

Chris Heilmann Chris Heilmann +2 · LIVE

8:56 min

Navigating CSS complexity and embracing core frontend technologies

Chris Heilmann Chris Heilmann +2 · LIVE

5:29 min

Creating customizable and unstyled web component patterns

Aaron T. Grogg · Coffee With Developers

5:39 min

Anticipating missing CSS features and upcoming standardizations

Onur Gumus · LIVE

1:01 min

Understanding the fundamental role of CSS in web development

Patricio Vargas · LIVE

8:07 min

Modern JavaScript loop optimization and CSS innovations

Chris Heilmann Chris Heilmann +2 · LIVE

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Building a component library for modern challenges thumbnail
29:44
World Congress 2023 • about 3 years ago

Building a component library for modern challenges

Filip Rakowski

Keith Cirkle of GitHub on React Fatigue thumbnail
49:32
Coffee With Developers • almost 2 years ago

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

Frameworkless: How to use Web-Components in production? thumbnail
46:39
JS Congress • almost 5 years ago

Frameworkless: How to use Web-Components in production?

Tobias Münch

Extending HTML with Web Components thumbnail
41:54
World Congress 2022 • over 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 6 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.