Hacker News Reader

Comment by fiddlerwoaroof | Hacker News Reader

As someone who actually likes a lot of the languages that developers like to hate (bash, JS, css), I like this take on CSS. That being said, I think the problem with some of these things isn’t that they behave according to specifications but that the specifications don’t default to sensible defaults (“defaults matter”): the default overflow behavior is basically what no one wants; same with padding being outside the border (fixed by border-box); and with the way margins of child elements collapse into the margins of parent elements.

View on HN

But the css default is that a container expand to contain the content without overflow or cropping.

An effect like in the logo only happens if you set an explicit width which is less than the longest word.

I think it would be less surprising if you had to opt-into text overflowing the border-box: the current behavior is like the behavior of floats, which always ended up being something you spent a lot of time working around.

What would be a better default then? Scroll or crop? Breaking the word? Neither are great.

By using “width” you are explicitly opting out of the default “expand to fit”.

If I say `width: 32px`, I want the width to be 32px, cropped, because that's what I asked for. This is really a question of what the default value of the `overflow` property should be.

Ok, I would disagree that cropping is the best default. The overflow effect is typically unintended (eg. the new design was never tested with the German translation), but at least you can read the text if it happens. Silently hiding content would be way worse for the user IMHO.

You might deliberately want to crop text to get some particular visual effect, but I cant see why you would want it to be the default for all text.

The issue is you are putting a bigger box inside a smaller box. There is no perfect way to solve this, but css defaults to respecting the specified sizes by letting the inner box overflow the edge of the outer box. Seems reasonable to me, and you can get scaling or scrolling or cropping instead if you specify so.

Collapsing margins was a sane default in the original use case of CSS - text documents with sections and headers. But it is not intuitive when working with GUI components.

Even when I'm writing HTML documents, collapsing margins doesn't make sense. I'm sure there's some historical reason here, but it's been a surprising default as long as people have been writing CSS. `thing+other-thing { margin: 0; }` (or `thing > other-thing:first-child { margin: 0; }`) is a lot more explicit and less likely to be surprising. (And, yes, I've been writing HTML+CSS since CSS was first released)

Part of the reasoning here is that I’ve fixed a lot of style issues where someone allowed the content of an element to overflow its boundaries. While this might be ok in some contexts, it creates a lot of weird edge-cases in any moderately complicated page and the cause of the issue is invisible. With cropping, you can see the problem much more easily because the content is just cropped or otherwise cut out.

I came here to say this.

Bad defaults are the bane of one's existence

Reply on news.ycombinator.com