box-sizing best practice

[Dunexus]

Reading reboot.css, I saw you set box-sizing using

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

instead of

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

Even if in most cases the first version would works fine, the second one allows devs to reset box-sizing for components designed to work in default box-sizing just by setting box-sizing : conten-box on the parent element.

Related article: Inheriting box-sizing Probably Slightly Better Best-Practice

[andresgalante]

Hi @Dunexus this is smart! (not surprisingly since it's coming from Chris Coyer)

[yuheiy]

Is universal selector necessary for ::before and ::after?

[bkdotcom]

@yuheiy, it's not required.
This will also work.

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

shouldn't we be using two-colons??
From MDN:

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

[mdo]

We reverted that approach in #23118 because of #22872.

[yuheiy]

That approach is widely known. But it is not explicit why it is not being used. I think some comments are necessary in the code.

[andresgalante]

I'll close this issue for now, let's revisit the idea when chrome fixes the bog. Thanks @Dunexus

[Dunexus]

Related chromium bug tracker ticket : Box-Sizing does not inherit correctly inside <details>.