> Canonical URL: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitches # Using CSS in JS with Stitches ![](https://cdn.sanity.io/images/hfh83o0w/production/9be71c92a88bc5fb120fa8dcc3ef8f1b6581ecb7-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/images/hfh83o0w/production/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Pedro Duarte](https://cdn.sanity.io/images/hfh83o0w/production/1d521fad31fda359f0ab59015f0c394ce78b18b6-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Pedro Duarte](/guest/pedro-duarte)July 14, 2021 ## Listening Options [Spotify](https://open.spotify.com/episode/6BgooamhwjgQSCrsBofhyF)[Apple](https://podcasts.apple.com/us/podcast/1-29-using-css-in-js-with-stitches/id1491655542?i=1000528904790)[YouTube](https://youtu.be/GBKQcjX-1Lo)[Pocket Casts](https://pca.st/episode/b8d73f02-ec6b-4ebc-97e0-cba3088be621)[Castbox](https://castbox.fm/episode/id2508485-id404729962)[Castro](https://castro.fm/episode/21mcoi)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss) **Using CSS in JS with Stitches** is a CodingCat.dev podcast episode featuring Pedro Duarte alongside Alex Patterson and Brittney Postma focused on CSS, JavaScript. We sit down with Pedro Duarte to talk all about using CSS in JavaScript and why Modulz created Stitches. Using CSS in JS with Stitches: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitchesWatch the full video breakdown on[**YouTube**](https://www.youtube.com/watch?v=GBKQcjX-1Lo)or explore the architectural notes, chapters, and official documentation links below. ## Questions - What is CSS in JS? - Why use CSS in JS? - Why did Modulz create Stitches? - What's special about Stitches? - Is Stitches similar to styled components? - How does it differ from libraries like Emotion and Chakra? ## Links - [Stitches docs](https://stitches.dev/docs/installation) - [Stitches repo](https://github.com/modulz/stitches) - [Stitches twitter](https://twitter.com/stitchesjs) - [The Future of the Front-End](https://www.youtube.com/watch?v=Gw28VgyKGkw&t=3585s) - [Radix UI](https://www.radix-ui.com/) - [NPM Comparison of libraries](https://www.npmtrends.com/@chakra-ui/core-vs-@emotion/core-vs-styled-components-vs-@stitches/react) ## Technical Overview: Using CSS in JS with Stitches Using CSS in JS with Stitches: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitches When applying the concepts from**Using CSS in JS with Stitches** in a production codebase, teams working with CSS, JavaScript should align their implementation with the[**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS)(Modern layout, Grid, Flexbox, animations, and cascade layers). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales. ### Key Engineering Takeaways - **Core Topic Focus:** Practical strategies for CSS, JavaScript covered in "Using CSS in JS with Stitches" (We sit down with Pedro Duarte to talk all about using CSS in JavaScript and why Modulz created Stitches.). - **Production Implementation:** Combine the architectural patterns demonstrated in this podcast with the official[MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)for type safety, performance, and long-term maintainability. - **Hands-On Video Walkthrough:** Follow along with the live coding demos and discussion on[YouTube (Using CSS in JS with Stitches)](https://www.youtube.com/watch?v=GBKQcjX-1Lo)and subscribe to[CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)for weekly deep dives. ## Resources, Links & Official Documentation - **Watch on YouTube:** [Using CSS in JS with Stitches Full Video](https://www.youtube.com/watch?v=GBKQcjX-1Lo)(plus[Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **Show Pick:** [Invincible TV Show (picked by Alex Patterson)](https://www.imdb.com/title/tt6741278/) - **Show Pick:** [JS and Friends Conference (picked by Alex Patterson)](https://www.javascriptandfriends.com/) - **Show Pick:** [The Differing Perspectives on CSS-in-JS (picked by Brittney Postma)](https://css-tricks.com/the-differing-perspectives-on-css-in-js/) - **Show Pick:** [Snowpack (picked by Brittney Postma)](https://www.snowpack.dev/) - **Show Pick:** [Two Distant Strangers, on Netflix (picked by Pedro Duarte)](https://www.netflix.com/title/81447229) - [**Pedro Duarte Guest Profile & Episodes on CodingCat.dev**](/guest/pedro-duarte) - [**Pedro Duarte on GitHub**](https://github.com/peduarte) - [**Pedro Duarte Official Website**](https://ped.ro) - [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS)Modern layout, Grid, Flexbox, animations, and cascade layers - [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript)ECMAScript specifications, Web APIs, and runtime fundamentals ## Related CodingCat.dev Tutorials & Podcast Episodes - [**Creating a Better Vue with Nuxt**](/podcast/1-23-creating-a-better-vue-with-nuxt): We chat with Daniel Roe about how he became a member of the Nuxt team and how Nuxt fits into the Vue.js ecosystem. - [**Teaching Others to Code Lessons Learned**](/podcast/1-19-teaching-others-to-code-lessons-learned): In this episode we sit down with Prince Wilson and talk about his experience teaching at an in person bootcamp. - [**Payload CMS**](/podcast/1-17-payload-cms): We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS. ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Using CSS in JS with Stitches? We sit down with Pedro Duarte to talk all about using CSS in JavaScript and why Modulz created Stitches. Using CSS in JS with Stitches: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitches Throughout this podcast, Pedro Duarte breaks down real-world implementation details for CSS, JavaScript so developers can apply these patterns directly in production. ### How do you implement CSS best practices in production? When adopting CSS and JavaScript in a production stack, start by validating your configuration against the[**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS)(Modern layout, Grid, Flexbox, animations, and cascade layers). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Using CSS in JS with Stitches walkthrough and find related code resources? You can watch the complete video session for[**Using CSS in JS with Stitches**](https://www.youtube.com/watch?v=GBKQcjX-1Lo)on the[**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1).For a deeper dive into CSS, check out our related guide:[**Creating a Better Vue with Nuxt**](/podcast/1-23-creating-a-better-vue-with-nuxt). ## Episode Summary Using CSS in JS with Stitches: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitches ## Picks ### Alex Patterson - [Invincible TV Show](https://www.imdb.com/title/tt6741278/) - [JS and Friends Conference](https://www.javascriptandfriends.com/) ### Brittney Postma - [The Differing Perspectives on CSS-in-JS](https://css-tricks.com/the-differing-perspectives-on-css-in-js/) - [Snowpack](https://www.snowpack.dev/) ### Pedro Duarte - [Two Distant Strangers, on Netflix](https://www.netflix.com/title/81447229) ## Recent Podcasts [View More](/podcasts/page/1)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming) ### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming) November 19, 2025 Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences) ### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences) November 4, 2025 Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together! [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)