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

181–190 of 230 posts

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

#181

Post by kylemh »

au-arms wrote: post #173
thomasahle wrote: post #171

Earlier quoted context omitted.

Can't you just use the spacing properties of the container? Like flexbox's space-around and space- between?

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.

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

#183

Post by wruza »

HelloNurse wrote: post #158
wruza wrote: post #132

Earlier quoted context omitted.

If you want to place a slider between two text paragraphs I don’t, I want to put a slider between A and B. I don’t know what’s there from the bottom-up rule. A or B may even have a loadable content, so I know nothing until it’s rendered. If A and B are paragraphs, that’s usually a coincidence irrelevant to the container’s purpose. So what is the correct way to put a slider between beforehand unknown type A and type B…

It seems that I am discussing graphical design while you are discussing CSS anarchism and worst-case technical details. I mentioned text paragraphs because they are the most common and traditional type of block , but images and frames are popular since at least the middle ages and they should have about the same margins as text paragraphs (solid dark objects more, transparent images with internal empty space that add…

It seems you ain’t the one who has to look for the best turpentine, well, to each their own. Thanks for the info, I hope it will help with my next layout issue!

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

#185

Post by the_other »

MarcellusDrum wrote: post #123
j0ej0ej0e wrote: post #107

Earlier quoted context omitted.

My company recently had a FE candidate supply a test using tables.

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?

Tables "mean" tabular data... grids of values with headings. The intent was that software could consume tabular data for processing without having to worry that it might be a "table for layout".

"table-like" layouts made using s and CSS, including `display: table` are fine.

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

#186

Post by the_other »

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…

You have the same understanding as the OP. The difference is that the OP is working on a component-based framework. In such a framework, it makes sense to declare the rule defining child margins *in* the parent component's code, not in the child's code.

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

#187

Post by the_other »

Kavelach wrote: post #115
goldenkey wrote: post #114

Earlier quoted context omitted.

I hadn't heard of the owl selector for selecting :not(:first-child). Thank you for teaching me something new!

Note that the owl selector is pretty slow when it comes to being processed by browsers. If you use it sparingly, it shouldn't be so bad, but leave it all over the place, and you'll see the impact

> owl selector is pretty slow when it comes to being processed by browsers

I'm sure this hasn't been relevant for about 15 years. CSS rendering is _fast_.

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

#188

Post by the_other »

spankalee wrote: post #169

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

> 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.

This is exactly the problem "spacer components" solve.

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

#190

Post by s-lambert »

au-arms wrote: post #166

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…

Why do you need to add spacer divs? As long as the child components accept classes as props then the styling comes from the parent but is still applied on the children.
Post reply on HN