From de97b30139f64906810379cb14afadb747afc0b4 Mon Sep 17 00:00:00 2001 From: randyrektor <157041235+randyrektor@users.noreply.github.com> Date: Thu, 16 Apr 2026 09:52:59 -0400 Subject: [PATCH] Create 999 - Writing Maintainable CSS.md --- shows/999 - Writing Maintainable CSS.md | 49 +++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 shows/999 - Writing Maintainable CSS.md diff --git a/shows/999 - Writing Maintainable CSS.md b/shows/999 - Writing Maintainable CSS.md new file mode 100644 index 000000000..9c3627ec7 --- /dev/null +++ b/shows/999 - Writing Maintainable CSS.md @@ -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) \ No newline at end of file