[Box] Atomic CSS classes

My question is based on the often used classes for Spacing for Margin and Padding such as:

• m-0: margin: 0;
• pb-1: padding-bottom: 0.25rem;

Is there anything similar in MUI? I’ve seen the System (alpha), is this the way to go? What is the right way to handle Spacing in MUI v3?

I’ve noticed that most (all?) examples are based on useStyles. But it seems like it is creating new classes each time it is used. If I am right, I wouldn’t think of it as a good go, as it’ll make the project’s CSS scale up over time while adding more style, as opposed to atomic CSS approach (as in TailwindCSS).

Any suggestion for managing Spacing(Margin & Padding) in MUI?

[oliviertassinari]

I had a similar thought recently. The more I think of the atomic CSS approach for the Box component, the more I like it.

[oliviertassinari]

Closing for #21657. It’s a performance concern.