global box-sizing: border-box;

[snowdream]

should we use:

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

better than

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[Flo2ent]

Nope. I had issues with inherit.

For example, in this code: (HTML)

<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, consectetur? Tenetur facilis vitae doloribus minima.
  </p>
</main>

(CSS)

html {
  box-sizing: border-box;
}


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


main {
  /*
   Set a 65ch maximum inline size for readability.
   We must apply this to the content box.
  */
  box-sizing: content-box;
  max-inline-size: 65ch;
  margin-inline: auto;
  padding-inline: 1.6rem;
}

...the issue we encounter is that the <p> (or whatever inside <main>) inherits the content-box declaration.

[snowdream]

We want to set "box-sizing: border-box;" as the root box-sizing, and "box-sizing: inherit" as the default box-sizing.

If you set a container with "box-sizing: content-box;", you should set the box-sizing of the components in the container yourself.