117: Mitchell Hamilton - Writing CSS-in-JS with Emotion
Episode
51 min
Read time
2 min
Topics
Software Development, Psychology & Behavior
AI-Generated Summary
Key Takeaways
- ✓CSS Prop vs Styled API: Emotion's CSS prop allows direct inline styling without creating named components for every element, avoiding forced abstractions. Apply styles directly to divs and spans without extracting reusable styled components first, enabling faster prototyping.
- ✓Performance Through insertRule: Emotion uses the insertRule method on stylesheet objects instead of appending to innerHTML, preventing browser from reparsing entire style tags. This approach inserts single rules efficiently, avoiding performance degradation when adding thousands of dynamic styles at runtime.
- ✓Class Name Generation Strategy: Emotion hashes concatenated style strings to generate class names like css-hash, enabling caching. When identical styles appear multiple times, the same class name gets reused. Only one class per element eliminates declaration order concerns and enables aggressive caching.
- ✓Zero-Config Server Rendering: Version 10 renders style tags directly in component output during server-side rendering, eliminating manual extraction steps. React context tracks inserted styles to prevent duplicates within component trees, though sibling components without shared emotion parent may duplicate styles.
What It Covers
Mitchell Hamilton explains Emotion CSS-in-JS library architecture, comparing the CSS prop approach to styled components API, detailing performance optimizations through insertRule API, and addressing server-side rendering implementation challenges.
Key Questions Answered
- •CSS Prop vs Styled API: Emotion's CSS prop allows direct inline styling without creating named components for every element, avoiding forced abstractions. Apply styles directly to divs and spans without extracting reusable styled components first, enabling faster prototyping.
- •Performance Through insertRule: Emotion uses the insertRule method on stylesheet objects instead of appending to innerHTML, preventing browser from reparsing entire style tags. This approach inserts single rules efficiently, avoiding performance degradation when adding thousands of dynamic styles at runtime.
- •Class Name Generation Strategy: Emotion hashes concatenated style strings to generate class names like css-hash, enabling caching. When identical styles appear multiple times, the same class name gets reused. Only one class per element eliminates declaration order concerns and enables aggressive caching.
- •Zero-Config Server Rendering: Version 10 renders style tags directly in component output during server-side rendering, eliminating manual extraction steps. React context tracks inserted styles to prevent duplicates within component trees, though sibling components without shared emotion parent may duplicate styles.
Notable Moment
Hamilton reveals Emotion creates JavaScript errors in development to parse stack traces and extract component names, automatically labeling generated CSS classes with Pascal-case function names to improve debugging without requiring manual configuration or Babel plugins.
Episode Transcript
In this episode of Fullstack Radio, I talked to Mitchell Hamilton about writing CSS in JS with emotion. This is Fullstack Radio episode one seventeen. Hey, everyone. Welcome to another episode of the Fullstack Radio podcast. I'm your host, Adam Wadden. And today, it is my pleasure to be speaking with Mitchell Hamilton who is one of the core maintainers of the emotion CSS in JS library. How's it going, Mitchell? It's going pretty good. Thanks. So I guess for anyone who's, not familiar with you, do you mind just kind of introducing yourself and talking a little bit about, what you do and kind of what your story is? I think, what a lot of people don't realize, which is pretty incredible, is that, you're still in high school, and you're, like, the core maintainer of this incredibly popular CSS and JS library. Yeah. So, I I kind of just started doing some programming stuff, and then I ended up contributing to this library just kind of because oh, I thought this is cool. I didn't start contributing to emotion. I started contributing to this library called Glam, which is by this person named Snelle Pye, who's amazing, seriously awesome. He's on the React core team now, just really great person, to, like, fix a little bug. And then eventually, that got merged into emotion, which happened, and then I started computing a bunch. And yeah. Awesome. Yeah. Cool. So so what kinda, like, drew you to those technologies in in the first place? I know, like, a lot of people, have never used CSS in JS before. Did you just kinda get into React and, like, other people were doing CSS in JS, and it just seemed like stuff worth playing with? Yeah. I, like, kind of started in React, and I, like you know, I tried, like, Sass and, like, a couple different things, but I was like, all of it just seemed really difficult and hard to do. And, you know, at that point, I was, like, still, like, quite new to all this stuff, and I, like, this just seems really difficult, and I want there to be an easier way to do this. Interesting. It's interesting to get that perspective, I guess, from someone who kind of started when some of this technology existed that didn't exist at a time where a lot of people, like, got comfortable with just, like, using Sass and CSS. Because I think there's, like, a lot of controversy around CSS and JS, and people say, oh, you shouldn't be mixing your styles with your components. Everything should be separate. So it's it's always interesting to hear from someone who comes in unbiased, like, what felt more natural. You know? Yeah. Like, a lot of the stuff I do now is just kind of, like, this thing seems confusing and difficult, and I wanna make it easier. And I think that's the perspective that makes the best stuff. Yeah. …
Get the full transcript (8,758 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 48-minute episode.
Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Full Stack Radio
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
Aug 21 · 76 min
Software Engineering Daily
Radix UI with Chance Strickland
Nov 18
More from Full Stack Radio
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
Jan 28 · 47 min
Eye on AI
Why People Are Paying 10x More for AI | Sid Sheth, d-Matrix
Aug 6
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
- EmotionBy guest
“Mitchell Hamilton explains Emotion CSS-in-JS library architecture, comparing the CSS prop approach to styled components API, detailing performance optimizations through insertRule API”
More from Full Stack Radio
We summarize every new episode. Want them in your inbox?
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
151: DHH – Building HEY with Hotwire
150: Secret Screencasting Tips & Behind the Scenes of Tailwind CSS 2.0
149: Choosing a Payment Processor, Radical Icons & W3C Hype
Similar Episodes
Related episodes from other podcasts
Software Engineering Daily
Nov 18
Radix UI with Chance Strickland
Eye on AI
Aug 6
Why People Are Paying 10x More for AI | Sid Sheth, d-Matrix
Latent Space
Jul 28
Codex from 0 to 10M Users: Building ChatGPT Work — Akshay Nathan, OpenAI
The Daily (NYT)
Jul 26
Why Do Some Memories Survive Dementia?
Software Engineering Daily
Jul 21
NanoClaw and the Rise of Personal AI Agents
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Full Stack Radio.
Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime