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

111–120 of 230 posts

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

#111

Post by eyelidlessness »

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.

> It's a shame that CSS doesn't allow the parent element to define how spacing around the child elements should work.

It really would be a shame if CSS didn’t have child selectors, and if they weren’t more specific than bare selectors.

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

#112

Post by eyelidlessness »

x3ro wrote: post #41
madmod wrote: post #13

Margin is generally more desirable than padding imo. Component/element knows the content it contains and uses margins to require a minimum amount of spacing. It avoids the need to make decisions on the spacing between every combination of components. Padding only works if you know everywhere your component might be used or don't mind remaking spacing decisions every time you use it. In my experience minimizing code n…

The author is arguing exactly that: remake spacing decisions every time you use a component, because that’s what many designers (most?) do. This is also true in my experience.

> remake spacing decisions every time you use a component

I’ve worked with several awesome designers and they all appreciated when I told them this is untenable.

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

#113

Post by lewisl9029 »

Agreed with avoiding margins, especially on reusable components, as they remove a degree of freedom for how they can be laid out by users. But these days, instead of margins or spacer components, I would recommend just using flex gap and grid gap across the board.

The difference being spacer components (and margins for that matter) don't wrap well, which is important for building fluid layouts that don't depend on hard-coded breakpoints.

I find that parent components specifying a gap between their children also happens to align much better with my mental model for designing layouts, not so much with spacer components or margins.

TL;DR: I haven't found any situation so far where I needed to reach for margins or spacer components ever since flex gap became widely supported. They're both dead to me now. Long live the gap.

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

#114

Post by goldenkey »

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…

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

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

#115

Post by Kavelach »

goldenkey wrote: post #114
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…

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

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

#116

Post by ratww »

izhak wrote: post #100
ratww wrote: post #63

Earlier quoted context omitted.

The negative reactions to your post are due to the laziness of not reading the article and the "gotcha". I think most of us come to Hacker News for interesting discussions, and the torrent of confidently incorrect "this person is wrong" comments is not adding anything to any discussion. The top comment is already clarifying the title, so any other comment should be unnecessary, especially snarky ones. The gotcha is a…

Funny and arrogant attempt to mask the problem with clickbait-ish title by turning into personal accusations in laziness, referring to memes, speaking for the rest of community, etc. The whole bag of tricks. Not gonna work, sorry. The title is wrong. Go blame the author, not the one calling out the bullshit.

The current title wasn't added by the author, it was editorialized by another person. This is also against the rules, and will probably be changed as soon as dang sees it. The original title might be cheeky, but it makes sense in the context of the post.

By the way, you broke another guideline in your comment: "Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something."

Anyway, I'm just explaining why other people flagged you. You can choose to try to understand the rationale for your flag/downvotes. Or you can cover your ears and accuse everyone else of being pro-clickbait.

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

#117

Post by stepbeek »

lelandfe wrote: post #21
janaagaard wrote: post #4

A more accurate title for this blog post would be “Ban Outer CSS Margins from Components”.

Bingo. Author will be fighting an uphill battle on HN because of the lack of specificity (an appropriate problem for a CSS article)

This made me laugh out loud. Thank you.

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

#118

Post by cies »

vore wrote: post #9

I think the main bugbear of margins that the article doesn't mention is margin collapse: I personally don't find the rules super intuitive and I would rather just be explicit with spacing than have the browser collapse things together!

This is according to me the real issue. Besides this unintuitive collapsability margins, there is only one difference between margin and padding: the edges/border of the background color.

It's the unintuitive collapsability that messes up margins.

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

#119

Post by sgt »

wruza wrote: post #78
sgt wrote: post #50

Earlier quoted context omitted.

My thoughts too. Building UI's in Flutter is a delight, as opposed to web technologies which can be a nightmare.

If it’s still built on canvas, doesn’t that mean something about the state of web layout.

That's true. That being said, Flutter Web is not entirely ideal and although it has some good use cases (very simple forms and web apps that need to be developed quickly), I would primarily suggest Flutter on iOS and Android.

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

#120

Post by ungamed »

eurasiantiger wrote: post #64
ungamedplayer wrote: post #34

What I would like is for a mobile site to both increase text size and reflow its contents as I pinch to zoom in on the site. Is it too much to ask ?

Use the browser text size controls instead.

how do you do this on mobile while browsing the site ? (and not jumping into chrome properties continually ?)
Post reply on HN