We should ban margin from our components. Hear me out.
By banning margin from all components you have to build more reusable and encapsulated components.
I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a developer to tweak the spacing used inside your component provide a prop to let them do so.
However, don’t let them set a direct size (e.g.
1em), but give them several options to choose from. Think of Tailwind’s
.m-2, etc. to tweak the margin itself, or Bootstrap’s
.btn-lg to make buttons small or big.