I think that using box-sizing: inherit;β can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.
Unless you are sure you want that to happen, itβs probably best just to use βbox-sizing: border-box;β to ensure that all elements use βborder-boxβ. If any elements need a different box-sizing, you would override it with more specificity.
Yup, ..to be extra safe :D
Mh, the
*
selector is relatively very expensive: I would use it rather sparingly.No. The * is the less expensive. Check some talk about performances by csswizardry
Googling quickly, they still seem to confirm it among the less efficient: csswizardry.com/2011/09/writing-ef...
8 years old post...
This one is much more resent and confirms that
*
is still more expensive: sitepoint.com/optimizing-css-id-se...It seems like the same thing? :(
No. The second snippet allows you to define a global box-sizing but let elements to inherit or change the behaviour
Oh ok! So your way is better for sure!
It's old trick, man
box-sizing
I think that using box-sizing: inherit;β can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.
Unless you are sure you want that to happen, itβs probably best just to use βbox-sizing: border-box;β to ensure that all elements use βborder-boxβ. If any elements need a different box-sizing, you would override it with more specificity.
Yeah indeed, things can get messy in this case.
I was a
box-sizing: inherit;
person, then I realised this is super useful:It means that when the screen is less than 1240px wide, it will have a 20px gap down either side of the screen with no need for media queries.
This technique doesn't work with
box-sizing: inherit;
though.