> 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 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.
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.