Writing Good CSS

Episode Summary

Executive Summary: Syntax revisits “Good CSS,” surveying modern approaches to writing maintainable styles: utility-first frameworks, component-heavy frameworks, classless/base-first styling, preprocessors, PostCSS plugins, CSS-in-JS, linting, purging unused CSS, and design tokens. The episode’s core message is that there’s no single best system—teams should choose a consistent approach that matches their workflow, browser targets, and need for scoping.

Main Topics: Utility-first CSS frameworks: Tailwind-style utilities are described as increasingly popular because they make it fast to build polished, consistent UIs directly in HTML, though they require learning a new class vocabulary and can feel like a second language on top of CSS. Traditional component frameworks and layout tools: Bootstrap and Foundation are discussed as older, still-useful frameworks that once solved layout and component problems before Flexbox and Grid became widely available; their relevance has declined as native CSS layout improved. Classless/base-first CSS and resets: The hosts advocate starting with strong base styles or a classless theme so common HTML elements look good by default, reducing the need for one-off styling and helping catch missing patterns like blockquotes or tables. Preprocessors and the shift to native CSS: Sass/SCSS, Stylus, and Less are reviewed as tools for variables, mixins, nesting, and compile-time generation. The hosts emphasize that preprocessors complement rather than replace modern CSS features like custom properties. PostCSS and plugin-driven styling: PostCSS is framed as 'Babel for CSS,' letting developers add only the transforms they need, such as autoprefixing, clamp transforms, custom property fallbacks, and environment-based preset loading. Maintainable CSS: scoping, linting, and removal of dead CSS: Styled Components, CSS Modules, BEM, and Stylelint are discussed as ways to manage scope and consistency. PurgeCSS is highlighted for stripping unused selectors from large frameworks to keep bundles lean. Design tokens and CSS variables: The episode closes by connecting CSS variables to broader design-token thinking: reusable semantic values for colors, sizes, elevation, and z-index that make styling more systematic and easier to maintain.

Key Arguments: Choose one consistent CSS strategy rather than mixing trends, because maintainability depends more on system discipline than on picking the newest syntax. Utility frameworks are effective for fast, polished UI work—especially dashboards and componentized layouts—but can feel like memorizing a parallel language. Frameworks like Bootstrap and Foundation declined mainly because Flexbox and Grid removed much of the need for heavy layout abstractions. Classless/base-first styling is a practical foundation because it makes ordinary HTML content look decent without custom classes and prevents overlooked elements from breaking the design. Sass and Stylus remain useful because compile-time features still solve different problems than browser-native CSS variables and dynamic runtime styling. PostCSS’s plugin model is valuable because it lets teams adopt only the CSS transforms they need, mirroring the modularity that made Babel successful. Stylelint and PurgeCSS provide real workflow benefits: one enforces standards, the other removes dead code from large CSS distributions.

Data Points: Temperature swing in Colorado: 100°F to 32°F - Scott describes a dramatic weather change over roughly 12 hours, from summer heat to freezing conditions. Temperature equivalents: 38°C to 0°C - Wes translates the Fahrenheit temperatures into Celsius during the weather discussion. Bootstrap latest version mentioned: 4.5 - The hosts reference Bootstrap's version while discussing its current relevance and NPM support. Stylelint downloads per month: 7.9 million - Wes cites npm download volume as evidence of Stylelint’s broad adoption. PurgeCSS use case: removing 90–95% of shipped selectors in some frameworks - The discussion emphasizes that large frameworks often ship far more CSS than a project actually uses, motivating tree-shaking-like removal. Free trial length for LogRocket: 14 days - The sponsor segment offers a two-week trial for LogRocket. Number of podcast hosts: 2 - The episode features Wes Bos and Scott Tolinski as co-hosts.

Pivotal Quotes: "It's not that I don't like it, it's that I don't have a super good use case." — Scott: Scott explains his hesitation about utility-first frameworks like Tailwind, emphasizing fit rather than quality. "I want to be able to say when is this scoped and when it's not." — Wes: Wes summarizes his ideal CSS workflow: explicit control over scoping rather than a fixed one-size-fits-all model. "Post CSS has such a large community with all of these plugins that, man, I would really love to take advantage of some of these." — Wes: Wes contrasts PostCSS’s modular ecosystem with more monolithic styling solutions.

Implications: For listeners, the takeaway is to pick a deliberate CSS system—utility-first, component-based, or token-driven—and back it with tooling like PostCSS, Stylelint, and PurgeCSS. Future CSS work is increasingly about composition, scope, and automation rather than relying on heavyweight frameworks.