Organizing CSS Components

11min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter explores the efficient structuring of CSS components, emphasizing intentional exceptions and the need for dead code elimination to avoid bloated stylesheets. It discusses the benefits of a component-based approach, including the use of single file components and methodologies like BEM. The chapter also highlights the importance of maintaining code simplicity and reusability while navigating the complexities of component design.

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them.

Show Notes

00:00 - Welcome to Syntax!
01:30 - Brought to you by Sentry.io.
02:11 - What makes a good CSS component system?
07:54 - Component vs part of a component
13:26 - CSS Modules
15:56 - Scoped CSS
- @scope - (82% support!) ff behind flag
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
21:07 - How is Panda different from style components?
- Panda
- StyleX
00:00 - Utility CSS
- TailwindCSS
- Uno
31:08 - Utility Sprinkles
34:13 - CSS variables
- open-props.style