Live data from Hacker News

Use spacer components instead of CSS margins (2020)

mxstbr.com

191–200 of 230 posts

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

#191

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…

I also think repaints are probably more expensive given this solution.

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

#192
post #181

Earlier quoted context omitted.

You can, however the lack of constraints on the spacing can make it difficult to match strict design systems. The dependence the spacing creates on the parent & child dimensions can lead to undesirable edge cases as well for dynamic/responsive content.

The opposite would be the intent and the goal. Align design system language WITH your spacer components ensuring strict adherence. Layout components work and they don't have performance issues.

I think we agree here. The argument I am making is that spacer components that introduce DOM bloat can negatively impact large apps, especially on low power devices.

A layout component does not have to introduce DOM bloat, it could apply layout directly via CSS to it's children. Layout components in this regard are incredibly helpful.

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

#193

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…

I also think repaints are probably more expensive given this solution.

More expensive with or without the spacer components?

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

#196
post #97
post #92

Margins are part of the specification of CSS. Banning them would be crazy. If you don't like thinking about them, sure .. introduce the concept of spacer elements in your framework. But outlawing something because you don't fully understand its purpose isn't the way to go.

I would recommend reading the article, or at least the top comments here. This is not what the article is advocating.

> We should ban margin from our components. Hear me out.

Maybe the first line of the article?

The implementation of the CSS spec is closely optimised for performance by the browser. Trying to achieve the same outcome by using other means, might feel like a clever way of conceptualising .. but I'd argue there's absolutely no need.

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

#197
post #92

Margins are part of the specification of CSS. Banning them would be crazy. If you don't like thinking about them, sure .. introduce the concept of spacer elements in your framework. But outlawing something because you don't fully understand its purpose isn't the way to go.

> because you don't fully understand its purpose How did you arrive at the conclusion that OP doesn't understand margins?

Because the author has gone to such lengths to avoid them!

Creating extra markup specifically for presentation for example ..

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

#198

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.

I wonder how many millions of man hours could have been saved over the last twenty years if we could have added semantic="false" to our tables rather than redesigning everything.

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

#200

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…

I saw a blog post a while back from a React developer who did this. They didn't use padding or margins, just `` elements with an exact height and width. I fail to see any benefits of doing it that way...just learn and use CSS.

I'm not sure if that's what this post is suggesting, though.

Post reply on HN