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

171–180 of 230 posts

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

#171

Post by thomasahle »

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…

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

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

#172

Post by ryathal »

baybal2 wrote: post #67
onion2k wrote: post #47

Ban layout styling from your components entirely if you can. Make everything headless (eg https://headlessui.dev/ , https://www.radix-ui.com/ , plain old HTML, etc). Leave the way things look up to the app that uses them.

The problem with CSS, and HTML is that content structure, content layout, and its styling is intertwined like spaghetti. A ground up HTML rewrite is needed.

The problem is people treat HTML, CSS, and JavaScript like they are separate languages. They should be treated collectively like bytecode/binary and almost no one should need to know more than they exist, a compiler should be what's writing web output.

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

#173

Post by au-arms »

thomasahle wrote: post #171
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…

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.

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

#174

Post by FloNeu »

I strongly disagree... That breaks the separation of markup and styling - and requires the markup being adapted for different styling. Pretty dumb solution for a non-existing problem... I don't even understand we you think (outer)margins are part of a component... Just don't but it into a components style if it isn't required or wanted ... That I may agree. But you realize you can add margins in a parent layout - like the page-layout and add and manipulate for the child components this way? Another of this considered harmful articles that need the byline - if you don't really know what you're doing and/or talking about...

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

#175

Post by roman-holovin »

mizzao wrote: post #165
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.

This is one reason I'm not really into utility frameworks. They are able to deal with "appearance" part of the CSS just fine, but layout part is too rigid and inflexible.

You can use plain old CSS for layout purposes and mix it with utility classes for appearance.

You can do:

    
        
          Buy now
        
        
          Add to bag
And then:

    .actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .actions > * + * {
        margin-left: 16px; // or better use var from tailwind to set sizes consistently.
        @apply: ml-5; // or do this https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
    }
This should combine those techniques, but I haven't used it in practice. And I'm sure in this case you will be labeled as heretic by both people who don't use utility frameworks and those who do ;)

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

#176

Post by nevercomments »

arcticbull wrote: post #161
armandososa wrote: post #146

Earlier quoted context omitted.

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

"Stacks" are an ancient concept, you'd struggle to find a UI framework (other than HTML) that's missing an analogous layout tool. Java's Swing had BoxLayout, JavaFX had VBox, Qt has QVBoxLayout, etc.

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

#177

Post by jimmygrapes »

spicybright wrote: post #150
tambourine_man wrote: post #130

Earlier quoted context omitted.

>Tendency towards semantic web is unfortunately dead. Not dead, but under severe attack. We can and will fightback

Can you elaborate a bit why? I've don't think I've seen a time where most sites were generally semantic

Accessibility is the main reason, I believe

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

#178

Post by deergomoo »

mizzao wrote: post #165
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.

Tailwind has gap-[0] for flex and grid, and space-[0] for the “owl selector” approach.

[0]: https://tailwindcss.com/docs/gap

[1]: https://tailwindcss.com/docs/space

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

#180

Post by kylemh »

iLoveOncall wrote: post #179

Hum, just use `box-sizing: border-box` and you solve the problem that the author has without using a complete anti-pattern.

No, it doesn't. Margin may not affect the width and height of the element with `box-sizing: border-box`, but margin still breaks encapsulation and reusability of the component. You make layout assumptions by applying margin to a component.
Post reply on HN