4 ms·

> I personally am one of the rare contrarians that prefers content-box for the web (simplifying my position a lot: good responsive design bases sizes and such o

> I personally am one of the rare contrarians that prefers content-box for the web (simplifying my position a lot: good responsive design bases sizes and such on content, not layout). This is interesting to me. How is content-box better for responsive design? Could you elaborate?

dgb23 3y ago
This stood out to me too, and makes me scratch my head a bit, because it is not in line with the otherwise pragmatic advice. For projects that have a design made by a designer (with something like Figma/Sketch/XD) it is definitely _not_ better for responsive design. Almost all designs assume that the border is part of an element. It's the more intuitive option, plus the tooling around designs will show you the spacing _between_ borders. Intuitive: In the real world, when I need measurements from you and you omit the conceptual borders of a thing, I'm not going to be very happy. Then you also have the issue that many of the common idioms get hairy and intuitive. Say you put an element with a border inside a container. With content-box, your 100% values are now not respecting the border, meaning you'd have to subtract the border width in order to fit the element. Lastly there is the philosophical argument about layout vs content. HTML/CSS does not in fact provide a meaningful and clear distinction of layout and content/structure. They do somewhat in theory, but that falls apart so quickly that you're better off just ignoring the theory and live with the practice. And on a human level, there is no clear distinction either. The letters, colors, images and shapes we put on the screen are all part of the same visual experience we try to communicate.
chrismorgan 3y ago
The notes I’ve written in my “I might eventually turn this into a blog post” file: —⁂— border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent. border-box is incompatible with ratios: you need content-box there. border-box is only actually useful for things like making body fill the viewport. See also what I wrote in https://news.ycombinator.com/item?id=29357636 https://news.ycombinator.com/item?id=29357636 —⁂— Elucidating a bit more: there’s only a difference if you have border or padding, and I just find it increasingly rare for border-box to be in any way useful, because we’re generally separating layout. Consider the row/column thing in Neat here: do you use margin on the children, or gap on the parent? Consensus is that gap on the parent is normally better: let the child be itself, and handle layout concerns at a higher level. That fits with why I say content-box is the better model for the web, the model that you should aim to think in terms of: treat border and padding as semantically part of a parent, automatically-sized component, and so if you are specifying your own dimensions, specify them relative to the content, because the border and padding are layout concerns. Designers tend to prefer layout to lead content, because that’s what’s easiest for them. I prefer to have content lead layout, choosing dimensions to fit the content and letting the layout size itself around that. All up, it’s still fairly nebulous, based around concepts and broad design patterns rather than concrete demonstrations, and that’s part of the reason I haven’t written it up more fully—I need to make a compelling case if I want to present it at all. (Another reason is that I just haven’t been doing any of them, really; my potential-blog-posts notes file has about 38 entries and 6,000 words, and I have another dozen or two drafts in my site, but I haven’t been focusing on that stuff recently.)
- alwillis 3y ago
  > border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent. > border-box is incompatible with ratios: you need content-box there. > border-box is only actually useful for things like making body fill the viewport. I get the contrarian thing, but this doesn't make a whole lot of sense. Both border-box and content-box are about content; it's just a matter what's included or not in the width of a box. Sure, there's some truth about what designers expected, but they weren't the only ones who were confused about how a box's border and padding changed how content worked… There's a reason why virtually every widely-used CSS framework starts by changing content-box to border-box. It's one of those issues that if we could go back in a Time Machine, content-box would have been the default; this is the next best thing: html { box-sizing: border-box } *, *::before, *::after { box-sizing: inherit } References From 2012, which started it all: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ https://www.paulirish.com/2012/box-sizing-border-box-ftw/ Developers are so psyched, border-box has a holiday: "International box-sizing Awareness Day"—https://css-tricks.com/international-box-sizing-awareness-day/ https://css-tricks.com/international-box-sizing-awareness-da... CSS Tricks almanac: https://css-tricks.com/almanac/properties/b/box-sizing/ https://css-tricks.com/almanac/properties/b/box-sizing/
  - chrismorgan 3y ago
    I’m aware of all the stuff. I just think (and have thought from the start) that it’s wrong and has missed the point, especially in a flex and grid world where (a) the difference should matter much less often, and (b) if the difference does matter, you could probably implement things better (in a way that would incidentally make the difference not matter).
- rablackburn 3y ago
  If it bumps it up the queue at all: I’ve been wanting to read someone pitch this way of thinking for what feels like an age. Personally, I went all in on border-box as agency work is always design-lead. When the work is “make this picture in css”, anything other than border-box will drive you insane. But it’s been a few decades of us pushing responsive design, so I’m curious if content-box doesn’t have its merits. I still don’t quite grok it from your explanations here (though I will re-read them), so would love to read that essay.

dgb23 3y ago

This stood out to me too, and makes me scratch my head a bit, because it is not in line with the otherwise pragmatic advice. For projects that have a design made by a designer (with something like Figma/Sketch/XD) it is definitely _not_ better for responsive design. Almost all designs assume that the border is part of an element. It's the more intuitive option, plus the tooling around designs will show you the spacing _between_ borders. Intuitive: In the real world, when I need measurements from you and you omit the conceptual borders of a thing, I'm not going to be very happy. Then you also have the issue that many of the common idioms get hairy and intuitive. Say you put an element with a border inside a container. With content-box, your 100% values are now not respecting the border, meaning you'd have to subtract the border width in order to fit the element. Lastly there is the philosophical argument about layout vs content. HTML/CSS does not in fact provide a meaningful and clear distinction of layout and content/structure. They do somewhat in theory, but that falls apart so quickly that you're better off just ignoring the theory and live with the practice. And on a human level, there is no clear distinction either. The letters, colors, images and shapes we put on the screen are all part of the same visual experience we try to communicate.

chrismorgan 3y ago

The notes I’ve written in my “I might eventually turn this into a blog post” file: —⁂— border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent. border-box is incompatible with ratios: you need content-box there. border-box is only actually useful for things like making body fill the viewport. See also what I wrote in https://news.ycombinator.com/item?id=29357636 https://news.ycombinator.com/item?id=29357636 —⁂— Elucidating a bit more: there’s only a difference if you have border or padding, and I just find it increasingly rare for border-box to be in any way useful, because we’re generally separating layout. Consider the row/column thing in Neat here: do you use margin on the children, or gap on the parent? Consensus is that gap on the parent is normally better: let the child be itself, and handle layout concerns at a higher level. That fits with why I say content-box is the better model for the web, the model that you should aim to think in terms of: treat border and padding as semantically part of a parent, automatically-sized component, and so if you are specifying your own dimensions, specify them relative to the content, because the border and padding are layout concerns. Designers tend to prefer layout to lead content, because that’s what’s easiest for them. I prefer to have content lead layout, choosing dimensions to fit the content and letting the layout size itself around that. All up, it’s still fairly nebulous, based around concepts and broad design patterns rather than concrete demonstrations, and that’s part of the reason I haven’t written it up more fully—I need to make a compelling case if I want to present it at all. (Another reason is that I just haven’t been doing any of them, really; my potential-blog-posts notes file has about 38 entries and 6,000 words, and I have another dozen or two drafts in my site, but I haven’t been focusing on that stuff recently.)

alwillis 3y ago
> border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent. > border-box is incompatible with ratios: you need content-box there. > border-box is only actually useful for things like making body fill the viewport. I get the contrarian thing, but this doesn't make a whole lot of sense. Both border-box and content-box are about content; it's just a matter what's included or not in the width of a box. Sure, there's some truth about what designers expected, but they weren't the only ones who were confused about how a box's border and padding changed how content worked… There's a reason why virtually every widely-used CSS framework starts by changing content-box to border-box. It's one of those issues that if we could go back in a Time Machine, content-box would have been the default; this is the next best thing: html { box-sizing: border-box } *, *::before, *::after { box-sizing: inherit } References From 2012, which started it all: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ https://www.paulirish.com/2012/box-sizing-border-box-ftw/ Developers are so psyched, border-box has a holiday: "International box-sizing Awareness Day"—https://css-tricks.com/international-box-sizing-awareness-day/ https://css-tricks.com/international-box-sizing-awareness-da... CSS Tricks almanac: https://css-tricks.com/almanac/properties/b/box-sizing/ https://css-tricks.com/almanac/properties/b/box-sizing/
- chrismorgan 3y ago
  I’m aware of all the stuff. I just think (and have thought from the start) that it’s wrong and has missed the point, especially in a flex and grid world where (a) the difference should matter much less often, and (b) if the difference does matter, you could probably implement things better (in a way that would incidentally make the difference not matter).
rablackburn 3y ago
If it bumps it up the queue at all: I’ve been wanting to read someone pitch this way of thinking for what feels like an age. Personally, I went all in on border-box as agency work is always design-lead. When the work is “make this picture in css”, anything other than border-box will drive you insane. But it’s been a few decades of us pushing responsive design, so I’m curious if content-box doesn’t have its merits. I still don’t quite grok it from your explanations here (though I will re-read them), so would love to read that essay.