Max Stoiber’s Strong Opinion About Margins

Avatar of Chris Coyier
Chris Coyier on

Going with that title instead of the classic developer clickbait version Max used. ;)

We should ban margin from our components.

Don’t use margin?! This thing I’ve been doing my entire career and don’t have any particular problems with?!

Well, that’s not exactly Max’s point. The point is that any particular component doesn’t necessarily know what context it is in, so it also doesn’t know what kind of spacing is necessary around it. His solution? Leave it to a parent component.

I don’t have any particular problem with that. Then again, constructing things can sometimes feel overwhelming when you’ve got a route component wrapping a query component wrapping a styled component wrapping a state machine component wrapping a spacer component wrapping some kind of semantic template. If that sounds like a lot, I bet a lot of y’all’s JavaScript-built codebases nest much deeper than that already.

In this world of component-driven front-ends, we need to make sure we don’t end up with such thick soup we can’t reason through it.

This also reminds me of a bold prediction from Adam Argyle, that the use of margin will decline entirely as gap is used more heavily in all-flexbox-and-grid situations.