Embrace Flexibility in CSS: Object vs. Utility Classes

1min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

Transitioning CSS into an object can limit flexibility, whereas utility CSS offers a more adaptable approach by utilizing multiple utility classes. Tools like Stylix from Facebook aim to package CSS properties conveniently, yet there's a divide in preference among developers, particularly between those who began with traditional CSS and those favoring a JavaScript-centric approach. Despite the advantages, the need for conversion and adaptation remains a point of contention, especially when integrating external CSS code.

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