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.
<h3 class="code-line">
<a></a>Show Notes</h3>
<ul>
<li class="has-line-data">
<a href="#t=00:00">00:00</a> Welcome to Syntax!</li>
<li class="has-line-data">
<a href="#t=01:31">01:31</a> Understanding CSS Manageability</li>
<li class="has-line-data">
<a href="#t=01:44">01:44</a> This CSS doesn’t leak to other parts of website.</li>
<li class="has-line-data">
<a href="#t=03:41">03:41</a> This CSS is easy to maintain.</li>
<li class="has-line-data">
<a href="#t=05:54">05:54</a> This CSS is reusable.</li>
<li class="has-line-data">
<a href="#t=06:10">06:10</a> Global Solutions Instead of Local Solutions.</li>
<li class="has-line-data">
<a href="#t=07:12">07:12</a> Flexibility and Adaptability in CSS</li>
<li class="has-line-data">
<a href="#t=09:36">09:36</a> Fluid Typography and Responsive Design
<ul>
<li class="has-line-data"><a href="https://fluid-type.tolin.ski/">fluid-type</a></li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=12:09">12:09</a> Variables and Consistency in CSS</li>
<li class="has-line-data">
<a href="#t=13:40">13:40</a> <a href="https://sentry.io/syntax">Brought to you by Sentry.io</a>.</li>
<li class="has-line-data">
<a href="#t=14:14">14:14</a> Values vs Variables.
<ul>
<li class="has-line-data">
<a href="https://www.projectwallace.com/">Project Wallace</a>.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=18:19">18:19</a> Choosing the Right CSS Methodology</li>
<li class="has-line-data">
<a href="#t=18:48">18:48</a> Utility CSS and Atomic CSS</li>
<li class="has-line-data">
<a href="#t=22:35">22:35</a> Exploring StyleX and Other Approaches
<ul>
<li class="has-line-data">
<a href="https://syntax.fm/650">Syntax Ep 650</a>.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=25:14">25:14</a> <a href="https://panda-css.com/">Panda CSS</a>.</li>
<li class="has-line-data">
<a href="#t=25:37">25:37</a> Component Scoped CSS: A Preferred Approach</li>
<li class="has-line-data">
<a href="#t=29:08">29:08</a> The Evolution of CSS Modules</li>
<li class="has-line-data">
<a href="#t=34:03">34:03</a> Global CSS: Best Practices
<ul>
<li class="has-line-data">
<a href="https://www.joshwcomeau.com/css/custom-css-reset/">Josh Comeau’s CSS Reset</a>.</li>
<li class="has-line-data">
<a href="https://graffiti-ui.com/">Scott’s Graffiti UI</a>.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=38:22">38:22</a> Harnessing CSS Variables</li>
<li class="has-line-data">
<a href="#t=41:33">41:33</a> Understanding CSS Layers</li>
<li class="has-line-data">
<a href="#t=43:52">43:52</a> The Power of CSS Scoping</li>
<li class="has-line-data">
<a href="#t=46:16">46:16</a> Enforcing CSS Standards with Tools</li>
</ul>
<h3 class="code-line">
<a></a>Hit us up on Socials!</h3>
Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href="https://www.instagram.com/syntax_fm/">Instagram</a> <a href="https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href="https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a>
Wes: <a href="https://twitter.com/wesbos">X</a> <a href="https://www.instagram.com/wesbos/">Instagram</a> <a href="https://www.tiktok.com/@wesbos">Tiktok</a> <a href="https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href="https://www.threads.net/@wesbos">Threads</a>
Scott: <a href="https://twitter.com/stolinski">X</a> <a href="https://www.instagram.com/stolinski/">Instagram</a> <a href="https://www.tiktok.com/@stolinski">Tiktok</a> <a href="https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href="https://www.threads.net/@stolinski">Threads</a>
Randy: <a href="https://twitter.com/randyrektor">X</a> <a href="https://www.instagram.com/randyrektor/">Instagram</a> <a href="https://www.youtube.com/@randyrektor">YouTube</a> <a href="https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

999: Writing Maintainable CSS

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews