ummm... I am not going to surronder my keyboard, and let me defense it :)

So actually, my original intention was not to persuade people to "replace CSS with DOM element", but to "rethink the boundary of responsibility for each component".

I would argue that one of the priciples of making a component self-contained is that the component should not affect its siblings. "margin", as an example, is one of the properties which will affect siblings. Thus, ".component { margin: 1rem }" does not solve the problem, because it is functioning the same as assigning the "margin" style directly.

Saying that, there are many ways to solve that, and I think <Spacer /> comoponent is the most clear and flexible one, though it may lead to some mindset changes (treat the spacing between elements as something more concrete than air) while having some bonus benefits (dynamic spacing with flexbox).

That's fine if you don't like the idea, and we have some alternatives, such as:

* Making a layout component who takes care of assigning margin to it children

e.g.,

.parent > .child { margin: 1rem }

* Making a wrap component and use it in the parent level

e.g.,

<Parent>

<Box mt={2}><Child /></Box>

</Parent>

Both of them are valid approaches where the responsibility of controlling spacing between components is lifted up.

So, let's back to the core of the proposal -- do not let the child control its outside spacing, but let its parent do.