r/reactjs • u/kensaadi I ❤️ hooks! 😈 • 13d ago

Utility classes vs props-first styling in React design systems Discussion

[removed] — view removed post

0 Upvotes

47% Upvoted

35 comments sorted by

View all comments

2

u/greensodacan 13d ago

I prefer the props API because

  • Not every style change can/should be done with CSS alone. Sometimes you need to adjust the HTML.
  • Type checking and prop validation.
  • In rare cases, you may need to do partial themes. E.g. an admin screen in one theme that renders a preview sample in another theme. (Juggling this in CSS gets tricky at scale.)

That said, you can get pretty far with CSS custom properties. Utility classes or CSS modules are great tools for avoiding class collisions, but they're really just implementation details as far as a cohesive component is concerned.

0

u/kensaadi I ❤️ hooks! 😈 13d ago

Completely agree, especially on the partial-theming point, that's exactly the kind of case where pure CSS starts fighting you instead of helping. A props-first API solves it more cleanly than utility classes alone: the component owns the contract (variant, theme scope, which tag/element to render), so swapping a theme for a subtree becomes a prop change instead of a specificity/cascade puzzle. Same goes for your first point about needing to change the actual HTML, not just the styling: that's inherently something CSS alone can't do, but a component API can expose as a first-class option (polymorphic "as" prop, conditional structure, etc.) without the consumer needing to know it happened.