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

41–50 of 230 posts

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

#41

Post by x3ro »

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.

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

#42

Post by izhak »

detaro wrote: post #40
izhak wrote: post #38

Earlier quoted context omitted.

Then the title of the article is misleading and should be changed to avoid confusion

or you could maybe read the article before looking at its source code for a gotcha?

or may be we should continue looking for gotchas when it comes to clickbait misleading titles and finally get the message of "clickbait is wrong" across to at least some part of tech blogging community?

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

#44

Post by 88913527 »

izhak wrote: post #33

Quoted post unavailable.

Without knowing if the author is using a template or otherwise not maintaining their webpage's HTML and CSS (it looks like something that could have been pre-packaged), it's hard to make the case.

We may, as engineers, use tools that internally implement software patterns that we have an academic disagreement with. And that doesn't make us any less dignified in our beliefs.

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

#46

Post by judofyr »

janaagaard wrote: post #4

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

Honestly I think this an amazingly effective title: It's very evident from the comments here who actually read the article (which is very short) and who are just replying to the title.

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

#48

Post by HelloNurse »

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.

I want CSS to make spacing decisions so that I don't have to, and a system where graphical elements look good by default because they come with appropriate margins and containers adapt to what I want them to contain (e.g. by shrinkwrapping the content or by switching between different numbers of columns or rows) is more useful than a non-system that looks bad unless I keep many tedious ad-hoc specifications consistent.

Moreover,

> Margin breaks component encapsulation. A well-built component should not affect anything outside itself.

Definitely not, margins are an essential part of a component, like a garden around a house, and they make components "usable in any context or layout" (unless the context or layout is stupidly overcomplicated).

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

#49

Post by jicea »

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!

Agree, collapsing margins are counterintuitive, and only applied to top and bottom margin. It’s really surprising how many people don’t know it’s a thing and fight the box model. If you think you’re constantly fighting layout, try to read the MDN docs [1] with a fresh eye. I was guilty to think I needn’t learn CSS, and reading the MDN really help me.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS

Post reply on HN