[lelandfe]

Needs (2020) in the title. Original discussion, 123 comments: https://news.ycombinator.com/item?id=22676442

Anyway, considered harmful articles considered harmful.

There is a time and place for margins. Being thoughtful with them is a better approach than "banning margin from all components."

Should I really ban the use of `margin-left: auto` when positioning my flexed elements? I don't think this article is actually advocating for that, but a novice reader may.

[HelloNurse]

Being thoughtful is a better approach than "considered harmful" clickbait in any situation.

Regarding CSS margins, they are part of the box model even if certain stylesheets neglect them, and the only conflicts they can be involved in are easily solved (a rule for "container x" is more specific than a rule for "x" and can override margins, particularly with parent padding, in special cases) and they highlight genuine design defects: trying to use a component both with and without its "natural" margins (without adding appropriate classes or wrapping containers), trying to specify conflicting margins, trying to fit variable-sized content inside fixed-size containers by messing with the content's required margins, and so on.

[underwater]

A margin is contextual, so a reusable component shouldn't have them.

It's a shame that CSS doesn't allow the parent element to define how spacing around the child elements should work.

[necovek]

I thought you could do that with eg.

  parent > * {
  ...
  }

There might be things missing to achieve whatever result you desire, but CSS does allow a parent element to define how spacing (and any other styling) works for child elements.

[5560675260]

We can do this now with flexbox and grid. Spacer component from the article can be implemented with https://developer.mozilla.org/en-US/docs/Web/CSS/gap

[eyelidlessness]

> It's a shame that CSS doesn't allow the parent element to define how spacing around the child elements should work.

It really would be a shame if CSS didn’t have child selectors, and if they weren’t more specific than bare selectors.

[spaniard89277]

You can do it with selectors, also with flexbox and the gap property.

[Xevi]

Out of curiosity, why do you need to use "margin-left: auto" when working with flexbox items? What is it that you're trying to do, which can't be solved with "justify-content" and "align-items"?

[djrockstar1]

Not OP but I had a scenario where I had a row with a variable number of items, left-aligned, and then the final item had to be right-aligned. "margin-left: auto" on the final item achieves that effect.

[dmix]

Still a useful article / discussion that belongs on HN IMO.