Use spacer components instead of CSS margins (2020) • Hacker News Board

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

#61

Post by detaro » Tue, Jan 04, 2022, 9:25 AM UTC

izhak wrote: post #42

detaro wrote: 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?

I mean, the top comment is someone proposing a better title. That's actually adding value to readers, compared to nonsense points that have nothing to do with the article. And that comment already was there when you commented, too.

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

#62

Post by laumars » Tue, Jan 04, 2022, 9:28 AM UTC

matsemann wrote: post #27

lelandfe wrote: post #21

Earlier quoted context omitted.

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

Or people could just read the very short article instead of instantly assume stuff based on the title here.

I did read the article and frankly it’s little better than the HN title. It’s heavily biased, fails to offer a convincing argument to anyone other than those who already believed the title, and even explicitly says margins should be banned.

Simply put, it’s not a good article.

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

#63

Post by ratww » Tue, Jan 04, 2022, 9:31 AM UTC

izhak wrote: post #59

djrockstar1 wrote: post #55

Earlier quoted context omitted.

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

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 another problem in itself: not only it comes from a misunderstanding of the post, a lot of people don't have control over their publishing software, but their advice should be judged on its own merits, not on some "you criticise society yet you participate in it" way [1].

[1] https://knowyourmeme.com/memes/we-should-improve-society-som...

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

#64

Post by eurasiantiger » Tue, Jan 04, 2022, 9:38 AM UTC

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.

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

#65

Post by wruza » Tue, Jan 04, 2022, 9:45 AM UTC

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.

What if a user needs it ready-to-use? Also imagine you’ve created some styleless form which I need to style according to my Bulma or Bootstrap stylesheet. What if the structure is different than these two are assuming?

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

#66

Post by ratww » Tue, Jan 04, 2022, 9:49 AM UTC

dreyfan wrote: post #5

mmm, spacer elements. the new 1999 is looking pretty awesome.

Spacer components described in the article and 90s spacer elements are not the same thing.

Here's the example linked by the article: https://seek-oss.github.io/braid-design-system/components/St...

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

#67

Post by baybal2 » Tue, Jan 04, 2022, 9:52 AM UTC

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.

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

#68

Post by ratww » Tue, Jan 04, 2022, 9:52 AM UTC

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.

"Component" doesn't necessarily means "third party library".

The headless components need to be styled in the end, and the guideline present in the article still applies to those cases: outer margins in components causes some headaches.

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

#69

Post by jyriand » Tue, Jan 04, 2022, 9:52 AM UTC

Why are there so many new component libraries with the same ideas and syntax? I thought the example was from chakra-ui but it was from Braid.

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

#70

Post by necovek » Tue, Jan 04, 2022, 9:52 AM UTC

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.

I thought you could do that with eg.

  parent > * {
  ...
  }

There might be things missing to achieve whatever result you desire, but CSS does allow a parent element to define how spacing (and any other styling) works for child elements.