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…
Use spacer components instead of CSS margins (2020)
191–200 of 230 posts
Re: Use spacer components instead of CSS margins (2020)
#192Earlier 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.
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)
#193Clever, 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)
#194Re: Use spacer components instead of CSS margins (2020)
#195Re: Use spacer components instead of CSS margins (2020)
#196Margins 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.
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)
#197Margins 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?
Creating extra markup specifically for presentation for example ..
Re: Use spacer components instead of CSS margins (2020)
#198Earlier 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.
Re: Use spacer components instead of CSS margins (2020)
#199Re: Use spacer components instead of CSS margins (2020)
#200Clever, 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'm not sure if that's what this post is suggesting, though.