Live data from Hacker News

Use spacer components instead of CSS margins (2020)

mxstbr.com

51–60 of 230 posts

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

#51

Earlier quoted context omitted.

Let's code all the apparence in the class attribute (instead of the style).

We do, its called tailwindcss lol (and its amazing)

Yes that was the joke (and I'm not a fan of it).

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

#52
post #33

Quoted post unavailable.

The text of the article contains an argument to avoid margins when creating reusable components, instead allowing the consumer of the component define its margins. There is no argument made against using margin properties.

I thought the argument, after reading the article, was to use spacer components that would define the space between elements because you would then be able to have differing margins when using in different contexts.

>avoid margins when creating reusable components

so, if this is using margins then they are not using reusable components? I mean, I have a difficult time taking the advice regarding CSS usage from someone not using reusable components.

Aside from all the other things people are saying this person doesn't know about, I don't think they know about the min, max, and clamp CSS functions which when used with margins can be amazing. Not to mention that the need to have different margins in different components uses might be handled with CSS variables, not mentioning that the variable can change due to its context seems an oversight making the rest of the article less than impressive.

on edit: it is of course a cheap shot to argue their site uses margins etc. I just wanted to note that I had sort of a disagreement as to the main takeaway from the article, and then I noted why I disagreed with that takeaway.

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

#55
post #42
post #40

Earlier quoted context omitted.

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?

Thing is, clickbait works, so people will continue doing it. All your "gotcha" showed was that it works. Look at all the people in this thread engaging with this post, not because of its content but because of its title. If a clickbait title will lead to higher engagement, why would an author not use it?

The best way to combat clickbait is to not fall for it, not play into it, to either ignore the article, or to read the article and discuss or critique the content instead of bringing more attention(all press is good press) to the title.

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

#56
post #33

Quoted post unavailable.

The text of the article contains an argument to avoid margins when creating reusable components, instead allowing the consumer of the component define its margins. There is no argument made against using margin properties.

They're not defining any margins though. They're using spacing components, and the article says no components should use margins.

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

#57

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…

Being thoughtful is a better approach than "considered harmful" clickbait in any situation.

Regarding CSS margins, they are part of the box model even if certain stylesheets neglect them, and the only conflicts they can be involved in are easily solved (a rule for "container x" is more specific than a rule for "x" and can override margins, particularly with parent padding, in special cases) and they highlight genuine design defects: trying to use a component both with and without its "natural" margins (without adding appropriate classes or wrapping containers), trying to specify conflicting margins, trying to fit variable-sized content inside fixed-size containers by messing with the content's required margins, and so on.

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

#59
post #42

Earlier quoted context omitted.

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?

Thing is, clickbait works, so people will continue doing it. All your "gotcha" showed was that it works. Look at all the people in this thread engaging with this post, not because of its content but because of its title. If a clickbait title will lead to higher engagement, why would an author not use it? The best way to combat clickbait is to not fall for it, not play into it, to either ignore the article, or to read…

My gotcha and the negative reaction to it shows only that the majority of readers are ok w/ using of clickbait titles. That's a pity. Although bringing attention to such things always gets negative reaction in the beginning. Not the reason to stay silent anyway.

> If a clickbait title will lead to higher engagement, why would an author not use it?

Out of intellectual/professional honesty e.g.?

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

#60

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.

Post reply on HN