zellwk
Why inherit the box-model?
This is cool! I'm gonna steal your ideas here :)
Can you explain why you chose the box-sizing: inherit approach? I find it very strange to inherit a layout property – it feels similar to inheriting margins or padding. When I (rarely) want to change box-sizing, it is always for a specific element in a specific situation (like a container that should have a certain inner width) – never for an element*-and-all-its-decendants*. The * { box-sizing: border-box; } approach solves for that with less code, and you can still use inherit for specific use-cases, as needed.
Can you explain why you chose the
box-sizing: inheritapproach?
@mirisuzanne This is fairly common so you could do a search for more info. Here are two links you'd come across with a Google search: https://css-tricks.com/box-sizing/#article-header-id-6 https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
Yeah, I'm well aware that it's common, and I've read all the articles. But they are way out of date, and I'm confused why people still do it.
It is straight-forward and clear how to override the universal selector with a new scoped setting for components:
* { box-sizing: border-box; }
.olschool * { box-sizing: content-box; }
You could even make that into a utility class. But it is not clear or readable when you want to create a one-off with the inherited version:
html { box-sizing: border-box; }
* { box-sizing: inherit; }
.one-off { box-sizing: content-box; }
/* also need to override direct children, to flip it back…? */
.one-off > * { box-sizing: border-box; }
It's more code all-around to do what should be straight-forward.
Yeah, I'm well aware that it's common, and I've read all the articles. But they are way out of date, and I'm confused why people still do it.
Oh, so you weren’t just curious and asking for the reason? So you have an opinion on it and want this CSS reset modified to how you would like it? I guess I’ll leave that between you and @zellwk. I was giving you more information since your comment made it seem like you thought it was weird and didn’t understand the reasoning behind it.
Sorry, yeah - I was mostly curious if there was a particular reason that Zell went with that approach despite the down sides of it.
Whoops sorry. Missed this thread for some reason.
I mostly stuck with it since the old days (because calculating width and padding are kinda hard without border box. Just wanted to make everything border-box to simplify stuff.
Nowdays, with CSS Grid, I'm considering removing box-border entirely, and only apply when I need it. (It's a radical thought, but I haven't tested enough to form a conclusion here).
