I can’t think of any scenario when I do not want box-sizing: border-box; set on every element on my page by default. In fact, I can’t think of the last time that I wanted to use the default content-box method.

However, I’ve just come across a major company’s design system that does not use border-box across all elements. And worse, if I try to set that manually for myself, the reusable components that they’ve exposed will all break. Why? Why would do this to me?

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

Please just add that as your default and never revert back.