why should the box size in css be ignored instead of applying the reset to all elements?

Question

What

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

is saying is that html element has box-sizing: border-box and that all elements are then going to inherit the box-sizing of their parent.

So, if you like ‘to begin with’ every element inherits box-sizing from html’s setting because no one has told it anything different.

But supposing you have somewhere

.mydiv {
  box-sizing: content-box;
}

with HTML

<div class="mydiv">
  <header>some text...
  </header>
</div>

what do you expect the box-sizing of the header element to be?

What setting the inherits above is saying is ‘I expect header to inherit its box-sizing from its parent’ and that is content-box.

If we’d had everything set to border-box at the start it would not be inheriting, it would use what it had been set at, border-box.