Create account

DEV Community

The case for * { margin: 20px }

Gajus Kuizinas on June 10, 2020

Suppose this layout: <ul class='posts'> <li class='post'> <h1> Title of the article </h1> <div cl...

Read full post

Aleksandr Hovhannisyan • Jun 10 '20

You bring this up as an example of what one would be inclined to do as a first pass:

.post,
.post h1,
.post .sub-heading,
.post .body {
  margin: 20px;
}

.post .sub-heading {
  margin: -10px 20px 20px 20px;
}

This is a bad design to begin with. And I'd argue that your solution isn't much better:

& > * {
  margin: 20px;
}

You'll inevitably run into the problem of collapsing margins with both top and bottom set to 20px.

Better solution: Use unidirectional margins, consistently applying a margin to either the top or bottom of all elements (but not both). I prefer bottom margins. This means my spacing flows consistently from the top down.

Gajus Kuizinas • Jun 10 '20

Use negative margin as is illustrated in one of the examples.

Aleksandr Hovhannisyan • Jun 10 '20

Why introduce unnecessary complexity, though? You could just as well do 0 20px 20px 0 and have unidirectional flow, or margin-bottom: 20px, or only margin-top: 20px. You're creating problems for yourself that could be avoided altogether.

Gajus Kuizinas • Jun 10 '20

Because it is not a real world scenario. The whole point of this pattern is to enforce a consistent spacing between members of a container. If one element requires different spacing than others, then your hierarchy of elements is off. I will update article to make this more clear.

Ben Holmes • Jun 10 '20 • Edited

Well, you might need a wrapper "div" or "section" for styling purposes... I'd hate to override a margin property I dreamt up every single time.

The inclusion of horizontal margins bothers me as well. What about form groups and labels? These would probably need overrides too...

Idk. Might be worth a try on personal projects, but it would make me pretty frustrated working on a team (especially if I'm new to the codebase) 🤷‍♀️

Søren Birkemeyer • Jun 10 '20

I'm a big fan of a variant of what you describe here called "the lobotomized owl" which was introduced in 2014 on A List Apart: alistapart.com/article/axiomatic-c.... The author has since iterated on his original idea and evolved it into the "stack" as described on every-layout.dev/layouts/stack/. I highly recommend Every Layout, it's a treasure trove of clever ideas like your approach!

Gajus Kuizinas • Jun 10 '20

Wow, this is beautifully written. Instantly bookmarked for future conversations on the subject.

Stephen Belovarich • Jun 10 '20 • Edited

While there may be some uniformity among parts of a design system, I don’t believe this approach is sustainable. What if the designer wants a more hierarchical margin throughout the design? Do you then override everything that requires the new margin? This approach adds unnecessary complexity. I would rather see margins explicitly zeroed out and set on specific elements that require a different margin than 0. That pattern makes for a more stable implementation of a design system.

Gajus Kuizinas • Jun 10 '20

What if the designer wants a more hierarchical margin throughout the design? Do you then override everything that requires the new margin.

I can respond to that if you share a real-world example. A requirement that adds inconsistent spacing between elements should be seriously questioned. However, as mentioned at the end of the article, it is likely that what you are missing is another container to logically group elements.

Ha Gia Phat • Jun 11 '20

If you don't want to pollute the global CSS namespace then you can use a pattern called "the Stack". It does the same thing but in the right way. Example implementation in React:

codesandbox.io/s/serverless-sky-2f...

invot • Jun 10 '20

I think this makes for a great thought experiment. I'd do this myself, but limit it to just the div tag.