Your eye gets trained eventually. Also most of our components look something like this once class names start to get long.
const inputWrapperClass = classNames(
'flex flex-col gap-y-1',
'group-focus:border-blue-500',
isDisabled ? 'opacity-50' : null
);
return (
<label className={inputWrapperClass}>
{...}
</label>
)
In practice our "full-stack" developers are writing less and less CSS because they're just using the components that encapsulate all of this, our frontend developers get code completion for our design system tokens, and we haven't had to ship any new CSS classes in the last few months.
Our new hires are able to just use the design system tokens rather than going in and saying `padding: 5px` and `padding: 4px` because the designer didn't think it was a big deal. They just write `p-1` and that covers it.
All the components get tree-shaken and only ship the styles they need so bundle size gets reduced as well.
If I had my dream team of 10x frontend developers and a perfect design team who always follows the rules they create then yes I would use regular css with css variables, but I don't.
I am more than happy to sacrifice "separation of technologies" for a happier team, more consistent styling, and faster delivery times.
Our new hires are able to just use the design system tokens rather than going in and saying `padding: 5px` and `padding: 4px` because the designer didn't think it was a big deal. They just write `p-1` and that covers it.
All the components get tree-shaken and only ship the styles they need so bundle size gets reduced as well.
If I had my dream team of 10x frontend developers and a perfect design team who always follows the rules they create then yes I would use regular css with css variables, but I don't.
I am more than happy to sacrifice "separation of technologies" for a happier team, more consistent styling, and faster delivery times.