Reuse with Restraint

2min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

Utilizing class-based styling, such as BEM (Block Element Modifier), enhances code organization by allowing for clear relationships between components and their child elements. However, it's crucial to maintain a balance; excessive nesting can hinder code reusability and complicate modifications. A recommended best practice is to limit nesting to three levels to ensure maintainability. If deeper nesting is necessary, evaluate whether certain elements should be separated into distinct classes or components to preserve clarity and functionality.

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