Skip to content

Create - (999 - Writing Maintainable CSS.md) #2194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
randyrektor merged 1 commit into from
Apr 16, 2026
Merged

Create - (999 - Writing Maintainable CSS.md) #2194

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions shows/999 - Writing Maintainable CSS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
number: 999
title: Writing Maintainable CSS
date: 1777287600000
url: https://traffic.megaphone.fm/FSI5518908653.mp3
youtube_url: https://www.youtube.com/watch?v=mbGbPVMSnAQ
---

Scott and Wes break down what makes CSS truly manageable—from preventing style leaks and embracing fluid layouts to choosing the right methodology, whether that's utility CSS, component-scoped styles, or CSS modules. They also dive into practical tips like leveraging CSS variables, layers, scoping, and tooling to keep your stylesheets clean and scalable.

### Show Notes

* **[00:00](#t=00:00)** Welcome to Syntax!
* **[01:31](#t=01:31)** Understanding CSS Manageability
* **[01:44](#t=01:44)** This CSS doesn’t leak to other parts of website.
* **[03:41](#t=03:41)** This CSS is easy to maintain.
* **[05:54](#t=05:54)** This CSS is reusable.
* **[06:10](#t=06:10)** Global Solutions Instead of Local Solutions.
* **[07:12](#t=07:12)** Flexibility and Adaptability in CSS
* **[09:36](#t=09:36)** Fluid Typography and Responsive Design
* [fluid-type](https://fluid-type.tolin.ski/)
* **[12:09](#t=12:09)** Variables and Consistency in CSS
* **[13:40](#t=13:40)** [Brought to you by Sentry.io](https://sentry.io/syntax).
* **[14:14](#t=14:14)** Values vs Variables.
* [Project Wallace](https://www.projectwallace.com/).
* **[18:19](#t=18:19)** Choosing the Right CSS Methodology
* **[18:48](#t=18:48)** Utility CSS and Atomic CSS
* **[22:35](#t=22:35)** Exploring StyleX and Other Approaches
* [Syntax Ep 650](https://syntax.fm/650).
* **[25:14](#t=25:14)** [Panda CSS](https://panda-css.com/).
* **[25:37](#t=25:37)** Component Scoped CSS: A Preferred Approach
* **[29:08](#t=29:08)** The Evolution of CSS Modules
* **[34:03](#t=34:03)** Global CSS: Best Practices
* [Josh Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/).
* [Scott’s Graffiti UI](https://graffiti-ui.com/).
* **[38:22](#t=38:22)** Harnessing CSS Variables
* **[41:33](#t=41:33)** Understanding CSS Layers
* **[43:52](#t=43:52)** The Power of CSS Scoping
* **[46:16](#t=46:16)** Enforcing CSS Standards with Tools

### Hit us up on Socials!

Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)

Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)

Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)

Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)
Loading