CSS Reset - Best Method

Hi there,
Which is the correct or best way out of these two?

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

html {
}

OR

html {
box-sizing: border-box;
}

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

Thanks

The second version is better except you can drop the prefix now (also note prefixes should be first in sequence otherwise you risk having the buggy prefix version working instead of the real version).

This is the code:

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

It is better because you may have third party widgets in your page and if they set the parent to be box-sizing:content-box the first rule would reset all the children to be border-box and possibly break the widget.

In the second rule you get all elements to inherit the box-sizing so that means you could have a section of the page using a different box-sizing and it all works seamlessly.

You can read more about it here:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.