Inlines styles are verbose and hard to change. Component styles allow us to build up components and customize as needed, but the styles themselves are well defined and coherent.

For example: MA1 (margin-all-size1) and MA2 (margin-all-size2) allow me to make a component with more margin, but the margin steps are standardized so everything will follow the same sizing and fit together well, and can be changed easily in one spot later if necessary.

It really only takes a few days at most to get used to the class names, and then you can easily tell everything about the component by just looking at the HTML. We follow an internal rule to place spacing first, then borders, then text, then colors at the end.

> MA1 (margin-all-size1) and MA2 (margin-all-size2)

Honestly these aren't too bad. But all the CSS frameworks I've seen of this style instead are like MA-10 (margin all 10- pixels) and MA-20 (margin-all 20 pixels) which of course completely defeats the idea of standardized steps beyond limiting you to that subset.

I think there is some value to a few of these styles in any project but ultimately you get more standardization with semantic names. "alert-danger" instead of "alert-red" for example.

There's no reason you can't combine then, and frameworks like Tailwinds mentioned above let you make those combined styles through config automatically.

However, my point was that it's a great fit for React and other SPA frameworks, where you can just create a <DangerAlert /> component instead, and inside you can use component styles.

But whatever works for you.

But if you're isolating styles inside react components, you're back to being able to use inline-styles. You can just functions and variables if you need standardization. Something like Tailwinds adds a level of indirection not a level of abstraction.