Inheriting box-sizing Probably Slightly Better Best-Practice

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.