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

71–80 of 230 posts

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

#71

Post by ui4jd73bdj »

HelloNurse wrote: post #48
x3ro wrote: post #41

Earlier quoted context omitted.

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

Exactly. Slapping some components together for a simple feature shouldn't require a designers input at all. Whether the defaults are margins or paddings I don't really care, but if the component looks bad without styling, it's a bad component.

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

#72

Post by Veen »

laumars wrote: post #62
matsemann wrote: post #27

Earlier quoted context omitted.

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.

> It’s heavily biased

What does "heavily biased" mean in this context? It's a straightforward article that puts forward a position, a series of propositions supporting that position, and a potential solution.

It's biased in that the author has an opinion he's trying to convince people of by providing arguments in its favour, but that's what writing tends to do (including your comment).

The "banning" stuff is obvious hyperbole[0]. No reasonable reader could conclude the writer means CSS margins should be banned in law.

[0]: https://en.wikipedia.org/wiki/Hyperbole

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

#73

Post by wruza »

HelloNurse wrote: post #48
x3ro wrote: post #41

Earlier quoted context omitted.

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

And then you have a container with A, B, margined apart by max(A.mr, B.ml) and want to insert a sizer knob in-between, which makes them (A.mr + B.ml) apart. Or you have to put ABCDE into a sortable wrapping flexbox, and the best practice* says you must -ml the flexbox, but now you don’t know how much because each of ABCDE has its own +ml. It’s all nice until it’s bullshit.

* which alone is utter nonsense

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

#74

Post by necovek »

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.

There are several types of designers, and even on the web itself, several different things you might be designing. Designing a text medium (eg. a blog) should have more focus on semantic tagging compared to a SPA where you probably want an entirely different approach (and where talk of "components" makes more sense).

I like TeX's box model over CSS which allows for easier "smart" spacing (look up hglue, vglue, hskip, vskip, and eg. care for orphans when typesetting etc.) and smarter column alignment (trivial alignment on decimal point in tables).

While I'd never call myself a designer, I've done plenty of TeX (print and PDF) publications that people have commended for usability and appearance.

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

#75

Post by AltruisticGapHN »

This is not a goods approach imho.

When I'm the html/css guy on a team, it makes my work super frustrating to have to deal with devs who preemptively try to break down everything into smaller bits. It gets in the way of iteratively improving my templates and css throughout a project.

The solution is simple.

First, you should use the "bottom margins only" approach wherever possible, cf. CSS best practice "use single directions margins only".

https://csswizardry.com/2012/06/single-direction-margin-decl...

If the Vue/React devs I worked this even understood just this, and put single direction margins in their components, there would be less issues already with collapsed margins and/or unintended vertical spacings.

Even better, just get rid of the spacing margins in the component altogether as the article suggest. But instead of creating more abstraction with "spacer" components, you simply add tailwind-style classes on your components such as list items, in the PARENT component's template.

Then the html/css guy till has full control over the templating, it's fluid and simple to edit, and there is no headaches with abstract "spacer" components that also add unnecessary complexity and indentation in the templates.

The main issue with "spacer" components is that in the end, the design is never this regular, There are always exceptions to the rule, and they are much more easily handled as I said by using atomic css classes like tailwind's `mb-*` in the PARENT template of the components you want to "space".

In my experience this approach accounts for ALL scenarios I've run into in a simple elegant way. The PARENT component of those you want to space can always have a bit of logic in React/Vue for those cases where the spacings differ from the default in the app.

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

#77

Post by necovek »

wruza wrote: post #73
HelloNurse wrote: post #48

Earlier quoted context omitted.

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

And then you have a container with A, B, margined apart by max(A.mr, B.ml) and want to insert a sizer knob in-between, which makes them (A.mr + B.ml) apart. Or you have to put ABCDE into a sortable wrapping flexbox, and the best practice* says you must -ml the flexbox, but now you don’t know how much because each of ABCDE has its own +ml. It’s all nice until it’s bullshit. * which alone is utter nonsense

Margins make complete sense when you do want to fold them, which is common with textual content (eg. imagine an img tag with bottom margin, and a h2 tag right after it with top margin).

The fact that they can be misused does not make them useless.

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

#78

Post by wruza »

sgt wrote: post #50
lykahb wrote: post #14

Flutter does this, and its layout model is quite well thought.

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.

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

#79

Post by cerved »

necovek wrote: post #74
x3ro wrote: post #41

Earlier quoted context omitted.

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.

There are several types of designers, and even on the web itself, several different things you might be designing. Designing a text medium (eg. a blog) should have more focus on semantic tagging compared to a SPA where you probably want an entirely different approach (and where talk of "components" makes more sense). I like TeX's box model over CSS which allows for easier "smart" spacing (look up hglue, vglue, hskip,…

Without taking side to which is superior.

Typesetting something to a beforehand known format is radically different problem to a beforehand unknown format.

Post reply on HN