Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Use spacer components instead of CSS margins (2020)

mxstbr.com

Post reply on HN
Print view View original

161–170 of 230 posts

Re: Use spacer components instead of CSS margins (2020)

#161

Post by arcticbull »

armandososa wrote: post #146
tristanperry wrote: post #89

I do agree generally, but it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick from the 90s/early 00s. Nothing wrong with the suggestion, but it's just ironic that we seem to be coming full circle again. Next we'll probably have posts extolling components for layouts ;)

> it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick Not really. The Stack component he uses as an example is actually just a thin abstraction over some reusable css. In plain html, it could look like ... ... ... There are no "spacer gifs" anywhere, it's only that you're lifting the margin responsibility to the parent. I may be wrong, but I think the whole stack c…

Stacks started in UIKit (UIStackView) and before that were cribbed from Android, IIRC.

Re: Use spacer components instead of CSS margins (2020)

#163

Post by pcurve »

vore wrote: post #9

I think the main bugbear of margins that the article doesn't mention is margin collapse: I personally don't find the rules super intuitive and I would rather just be explicit with spacing than have the browser collapse things together!

I almost feel it should be written out of the spec, because a lot of people still don't understand it, designers and developers. And design tools like Sketch or Figma will never implement it in their tools.

Re: Use spacer components instead of CSS margins (2020)

#165

Post by mizzao »

roman-holovin wrote: post #108

That's very reductionist approach. Sure, margin is a sharp tool and you need to use it responsibly. I avoid putting margins on "first"-level selector. So instead of .button { margin-left: 16px } I do .parent > .button { margin-left: 16px } Difference is that I can reuse '.button' elsewhere without modifications. Another point to consider is that margin is not the only CSS property that affects layout. Both grid, flex…

Is there a easy way to do this with a utility framework like tailwind? It just makes it so tempting to throw the margin on a component.

Re: Use spacer components instead of CSS margins (2020)

#166

Post by au-arms »

Clever, but this smells like a performance anti-pattern. Adopting this means you could, at worst, add 4 spacer divs per component. While most sites may never really feel a sting, for complex apps where reusability is a larger concern you've doubled to quadrupled the size of an already large DOM and you will be hit a death-by-one-thousand-cuts situation.

Now you've got more...

- html over the wire

- html to parse for first render

- DOM nodes to mount/unmount

- memory usage from excess DOM

- costly layouts due to extra nodes

- lighthouse complaints of an excessively large DOM

Otherwise a clean approach. Perhaps it could be solved at compile time or some other jsx -> CSS abstraction to maintain DX.

Re: Use spacer components instead of CSS margins (2020)

#167

Post by martin-adams »

schwartzworld wrote: post #128
MarcellusDrum wrote: post #123

Earlier quoted context omitted.

Serious question: What is inherently wrong with using Tables for organizing simple layouts? Is it frowned upon just because it is a "hacky" way of doing stuff?

I think it would be hard to make it responsive. Also, table is a semantic element. You should use it unless you're displaying tabular data.

You can make them responsive easy enough if you override all the table styling. I've done that before.

For me it's the semantic meaning, a table is tabular data.

However, I must say that using CSS grid is just like the old table-based design days.

https://twitter.com/Martin_Adams/status/1477214581449793538?...

Re: Use spacer components instead of CSS margins (2020)

#168

Post by fleddr »

7sidedmarble wrote: post #160
fleddr wrote: post #88

I fully agree with the solution. Spacer components are a sound concept if you consider that a component should have no awareness of the larger context it is placed in. A next step to make components even more robust is for them to respond to available space in the parent container (container queries). A spacer component is easy to understand and makes consistent spacing easy. There's nothing dirty or impure about it.…

You didn't read the article either huh

I did. What do you mean?

Re: Use spacer components instead of CSS margins (2020)

#169

Post by spankalee »

Not that I entirely disagree that the parent component should be able to override margins and position, but I think spacer components abstract this a bit too far, and really isn't necessary at all if you can just use CSS. This is probably due to an avoidance of exposing HTML and CSS to developers in React.

Ideally the parent component would just have some styles that only effect the children, so you add this CSS to the parent:

    x-item {
      margin: var(--space-3) 0 0 0;
    }
This works fine for custom elements (web components), but I think the problem is that in React you don't know what element a component is going to render, so it's generally much more difficult to target children this way.

Re: Use spacer components instead of CSS margins (2020)

#170

Post by spaniard89277 »

underwater wrote: post #60
lelandfe wrote: post #19

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 actuall…

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.

You can do it with selectors, also with flexbox and the gap property.
Post reply on HN