Margins are inevitable though, can not do FE without them but need to have clear rules of which components can use them and keep consistent within an application.
For example all sub-component should generally avoid having OUTER margins and leave that to the parent or container component(s) to decide by way of padding perhaps. A sub-component should be allowed to define its own internal margins/padding (between its own elements) only.
Margins are inevitable though, can not do FE without them but need to have clear rules of which components can use them and keep consistent within an application.
For example all sub-component should generally avoid having OUTER margins and leave that to the parent or container component(s) to decide by way of padding perhaps. A sub-component should be allowed to define its own internal margins/padding (between its own elements) only.
You can refuse from margins, for example use grid and gap properties, or "spacer" component, or flexbox. (Padding allowed though)
Grid not fully supported on IE 11 so not always possible to use grid ... Many webshops still support this browser. :)
I guess we can wait a bit :-) Or maybe use some kind of polyfill/transpiler, like this one.