Using CSS in JS with Stitches

Original: https://codingcat.dev/podcast/1-29-using-css-in-js-with-stitches

▶ Watch on YouTube & Subscribe to CodingCat.dev

**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-stitches Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

Questions

1. What is CSS in JS?
2. Why use CSS in JS?
3. Why did Modulz create Stitches?
4. What's special about Stitches?
5. Is Stitches similar to styled components?
6. How does it differ from libraries like Emotion and Chakra?

Links

• Stitches docs
• Stitches repo
• Stitches twitter
• The Future of the Front-End
• Radix UI
• NPM Comparison of libraries

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 (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 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) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Resources, Links & Official Documentation

• *Watch on YouTube: *Using CSS in JS with Stitches Full Video (plus Subscribe to CodingCat.dev)
• *Show Pick: *Invincible TV Show (picked by Alex Patterson)
• *Show Pick: *JS and Friends Conference (picked by Alex Patterson)
• *Show Pick: *The Differing Perspectives on CSS-in-JS (picked by Brittney Postma)
• *Show Pick: *Snowpack (picked by Brittney Postma)
• *Show Pick: *Two Distant Strangers, on Netflix (picked by Pedro Duarte)
• Pedro Duarte Guest Profile & Episodes on CodingCat.dev
• Pedro Duarte on GitHub
• Pedro Duarte Official Website
• MDN CSS Reference: Modern layout, Grid, Flexbox, animations, and cascade layers
• MDN JavaScript Reference: ECMAScript specifications, Web APIs, and runtime fundamentals

Related CodingCat.dev Tutorials & Podcast Episodes

• 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: In this episode we sit down with Prince Wilson and talk about his experience teaching at an in person bootcamp.
• 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 (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 on the CodingCat.dev YouTube channel. For a deeper dive into CSS, check out our related guide: Creating a Better Vue with Nuxt.