Utility CSS: A Double-Edged Sword

10min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter delves into the pros and cons of using utility-based CSS frameworks, particularly Tailwind, contrasting them with traditional CSS methods. It discusses developer frustrations, individual preferences, and the balancing act between ready-made utility systems and custom solutions like UNO CSS. Emphasizing the importance of adapting to new CSS features, the chapter highlights the creative freedom utility CSS offers while acknowledging potential challenges in styling methodology.

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