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

101–110 of 230 posts

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

#101

Post by HelloNurse »

wruza wrote: post #84
necovek wrote: post #77

Earlier quoted context omitted.

Margins make complete sense when you do want to fold them, which is common with textual content (eg. imagine an img tag with bottom margin, and a h2 tag right after it with top margin). The fact that they can be misused does not make them useless.

Web styling is not useless, it’s just fucked up. The article has no hope to change that (neither do we) and tries to find a balance. In a better world, margins would work in a block context (where paragraphs live) but not in flex/grid ones, which take layout in their hands. Another context could be called “constraints-based”, which would space its children relatively, like A.r + 10px <= B.l; B.r = this.r - 10px. Chil…

The "block context" for which setting margins is a good layout abstraction is not the technical "block", "inline-block" etc. of CSS, but the general situation of measuring the empty space between homogeneous rectangular blocks.

If you want to place a slider between two text paragraphs, the slider isn't a good match for them (even if rectangular, it's far smaller) and you'll have to give it small or even negative margins under the assumption of the text paragraphs having normal, big enough margins.

And this highlights the issue with the idea that "children would expose their preferred margins, which these layout contexts could take or not take into account": a reusable and modular layout should be bottom-up, with components knowing what CSS rules make them look good and containers respecting them. Since the slider is small it can have smaller margins than the text paragraphs, but a container that knows that its middle child is a slider is a complicated and ad-hoc container.

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

#102

Post by 734129837261 »

For stand-alone components? Sure, that's good practice. But if you have a `section` with a `h3` inside of it, there's nothing wrong with using `margin-bottom: 1rem;` for that `h3` element. It's the best practice because it leads to less confusion that way.

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

#104

Post by littlecranky67 »

Being a FE Developer myself I say there is no such thing as a standalone/full-encapsulated component in the FE world. Any non-trivial component always relies on, or uses outer contexts or side-effects. This could be non-scoped css stylings, translations, browser-environment specific state, global JS code/state, or networking state.

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

#106

Post by bartaxyz »

There's a use-case for more than a single approach. Margins and also collapsible margins are tremendously useful. In case of text of an article for example, where space changes based on other elements on the page (e. g. larger space above headings - the linked article also uses them).

In addition, if there's also CSS for `:first-child` that removes the leading margin and `:last-child` that removes the trailing, you can easily wrap them inside another component to remove the margins (or introduce a property to collapse them if you prefer). Of course, this is a bit more advanced and needs to be included in the documentation.

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

#107

Post by j0ej0ej0e »

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 ;)

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

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

#108

Post by roman-holovin »

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, flexbox and 'position' properties should be used with same care. And approach I highlighted above is usually good enough.

For margin specifically there is also a "owl" selector that makes is a bit easier to manage

    .parent > * + * {
      margin-top: 16px; // OR
      margin-left: 16px;
    }

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

#109

Post by the_other »

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.

Are you saying that content and layout _should_ always remain combined?

I accept that we come to this understanding through our early introduction to language, writing and art. Most people intuitively link structure and presentation when they compose content.

Separating them is incredibly useful. You can see this at a really basic level, in plain text. Lay out a single long paragraph of plain text into lines of max 80 chars, and then insert a word. The layout goes completely wrong and if you don't have tools to help you, you spend ridiculous amounts of time realigning the text. The line-length algorithm you're following (or using) is __totally__ separate from the content. HTML and CSS are this, scaled up to allow fine grained annotation and control of both semantics and presentation, independently.

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

#110

Post by 5560675260 »

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.

We can do this now with flexbox and grid. Spacer component from the article can be implemented with https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Post reply on HN