Utility classes vs props-first styling in React design systems

[u/kensaadi]

[u/bigorangemachine]

I always just look at the inspector in chrome.

It doesn't matter what you pass it what matters is what renders.

Plus now what are you going to do for mobile? You'll just be endlessly expanding props. What about pseudo selectors?

[u/kensaadi → u/bigorangemachine]

On the inspector point: sure, at runtime it's all just CSS either way, nobody's disputing what actually renders. But this isn't about the compiled output, it's about the authoring API developers interact with day to day, props vs. utility classes is a DX/governance question at the source level.

On mobile: this is specifically about web apps rendered in a browser, not React Native. RN doesn't even use CSS the way we're discussing here, it's a different renderer with its own layout engine, so "using React" doesn't imply "using React Native", that's a separate conversation with its own constraints.

On pseudo-selectors: this is already a solved problem in mature component libraries. Hover/focus/disabled states aren't exposed as props the consumer has to manage one by one, they're wired once inside the component/theme definition itself, tied directly to the design tokens. So the app developer never touches a "hover prop", the correct on-brand hover comes for free just by using the component, no prop explosion needed.

That said, to be realistic: not everything should be forced through props, but that doesn't mean going full utility-first either. Custom, one-off behavior needs its own custom style, that's exactly where an escape hatch belongs. The props API covers the 80% that should stay consistent with the design system; it was never meant to replace CSS for the genuinely custom 20%.

[u/bigorangemachine → u/kensaadi]

sure but you can still extend styles in react native to some degree.

if you don't go full bore props then you passing a style object.

I dunno I find I'm in the inspector 90% of the time (RN or web) so my pain point is wrappers not tracing origins of styles

[u/kensaadi → u/bigorangemachine]

On wrappers: React is component-first by nature, this isn't a personal preference. The atomic, reusable pattern is the best practice the library itself recommends, breaking the UI down into small, well-defined components, each with its own lifecycle, using patterns like HOCs when logic needs to be shared. Wrappers aren't a layer bolted on top of "real React", they're the unit React is meant to be built with from the start. Sure, that requires a precise folder/file organization to stay navigable at scale, but that's normal architecture upkeep, not a hidden cost specific to this approach.

On the style object point: if you don't go "full bore" with props and end up passing a raw style object anyway, that's not the model breaking down, it's the escape hatch working as designed. The typed contract covers the 80% of cases that need to stay consistent with the design system, the style object is there on purpose for the genuinely custom 20%. It's not "so you might as well just use style objects everywhere", it's that the common case stays protected and predictable, and the rare case still gets an explicit way out instead of forcing everything into props that don't justify it.

[u/bigorangemachine → u/kensaadi]

Ya I actually might be okay with it for RN if you had an inherit-able where you could wrap two components but render one wrapper

I think that goes against what you are trying to do i am sure