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

131–140 of 230 posts

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

#131

Post by izhak »

ratww wrote: post #116
izhak wrote: post #100

Earlier quoted context omitted.

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…

Here we ago again, first it was my laziness, now the luck or real understanding :) If we are on the grounds of telling other people what their choices are (another arrogant and surprising manipulation, but whatever) you have a choice to engage into fixing the wrong message. Or you can continue posting comments directly to unknown individuals trying to enlighten them on reasons how their behavior triggers you.

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

#132

Post by wruza »

HelloNurse wrote: post #101
wruza wrote: post #84

Earlier quoted context omitted.

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 marg…

If you want to place a slider between two text paragraphs

I don’t, I want to put a slider between A and B. I don’t know what’s there from the bottom-up rule. A or B may even have a loadable content, so I know nothing until it’s rendered. If A and B are paragraphs, that’s usually a coincidence irrelevant to the container’s purpose.

So what is the correct way to put a slider between beforehand unknown type A and type B components?

a reusable and modular layout should be bottom-up, with components knowing what CSS rules make them look good and containers respecting them

This approach is good until it’s not. You can’t just write off some layouts as “bad” and call it a day. It’s not modular, it’s pre-styled in a way that involves intimate knowledge about all of components and how they “stack” in advance, which is opposite to being modular.

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

#133

Post by rendall »

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css.

The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely encapsulated, not affecting anything outside itself. Worth discussing, anyway.

The solution is sadly typical, though. Just grab another component! No interest in what `` is actually doing?

How does it solve the problem? Does it use CSS? A single line in the style sheet: `display: flex` or `padding-bottom: 1rem` or something else like that?

This cultural lack of interest is why we have website source code littered with nonsense like `` and ``

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

#134

Post by ratww »

izhak wrote: post #131
ratww wrote: post #116

Earlier quoted context omitted.

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…

Here we ago again, first it was my laziness, now the luck or real understanding :) If we are on the grounds of telling other people what their choices are (another arrogant and surprising manipulation, but whatever) you have a choice to engage into fixing the wrong message. Or you can continue posting comments directly to unknown individuals trying to enlighten them on reasons how their behavior triggers you.

> you have a choice to engage into fixing the wrong message

I'm not the OP nor dang, so I can't fix it. About talking about it, I already mentioned that this had been done done, on my first comment: The top comment is already clarifying the title. Several people also replied to you.

That comment was made an hour before you made yours. Also the article itself contextualizes the title, and that would have cleared up your misunderstanding.

> Or you can continue posting comments directly to unknown individuals trying to enlighten them on reasons how their behavior triggers you.

Nothing is triggering me. You clearly seem bothered by the flagging from your edits, so I'm trying to explain to you how this community works. I'm sorry that my explanation doesn't satisfy you, but continuously attacking me won't change anything and won't do any good.

Please don't turn this into a flame war. I'm just trying to engage with you to help you understand. Please don't assume ill intent.

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

#135

Post by wruza »

ungamed wrote: post #120
eurasiantiger wrote: post #64

Earlier quoted context omitted.

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

Isn’t it by chance in a site menu (an icon left to the domain name where a reader mode is)?

https://androidinsider-ru.cdn.ampproject.org/ii/w820/s/andro... — a green one here? (this is a hot link)

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

#136

Post by armandososa »

rendall wrote: post #133

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css. The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely enc…

In a nutshell:

    .stack > * + * { margin-top: 1rem; }

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

#137

Post by rendall »

armandososa wrote: post #136
rendall wrote: post #133

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css. The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely enc…

In a nutshell: .stack > * + * { margin-top: 1rem; }

Literal laugh out loud. Thanks for that.

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

#138

Post by drdec »

MarcellusDrum wrote: post #123
j0ej0ej0e wrote: post #107

Earlier quoted context omitted.

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

Serious question: What is inherently wrong with using Tables for organizing simple layouts? Is it frowned upon just because it is a "hacky" way of doing stuff?

The original reason webmasters (remember them?) were discouraged from using tables for layout is that you quickly ended up with many layers of nested tables. The browsers at the time were not performant enough to handle it and the user experience suffered.

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

#139

Post by csbartus »

lewisl9029 wrote: post #113

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 ha…

Same approach over here.

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

#140

Post by [deleted] »

rendall wrote: post #133

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css. The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely enc…

[deleted]
Post reply on HN