I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea.
Here’s the adjusted version:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}Credit on the inheritence idea to Jon Neal here, who says:
This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior.
Explaining further, let’s say you have a component that was just designed to work with the default content-box box-sizing. You just wanted to use it and not mess with it.
.component {
/* designed to work in default box-sizing */
/* in your page, you could reset it to normal */
box-sizing: content-box;
}The trouble is, this doesn’t actually reset the entire component. Perhaps there is a <header> inside that component that expects to be in a content-box world. If this selector is in your CSS, in “the old way” of doing a box-sizing reset…
/* This selector is in most "old way" box-sizing resets */
* {
box-sizing: border-box;
}Then that header isn’t content-box as you might expect, it’s border-box. Like:
<div class="component"> <!-- I'm content-box -->
<header> <!-- I'm border-box still -->
</header>
</div>In order to make that reset easier and more intuitive, you can use the inheriting snippet up at the top there, and the inheriting will be preserved.
It works:
See the Pen Easy to Reset Box-Sizing by Chris Coyier (@chriscoyier) on CodePen.
This isn’t a majorly huge thing. You might already be using the box-sizing reset the “old way” and never have gotten bit by it. That’s the case for me. But as long as we’re promoting a “best practice” style snippet, we might as well hone it to be the best it can be.
Inheriting box-sizing Probably Slightly Better Best-Practice is a post from CSS-Tricks
