-
This was never a good best practice: html { box-sizing: border-box; } * { box-sizing: inherit; } Box properties shouldn't inherit by default. To change box-sizing for an entire component, do it explicitly: * { box-sizing: border-box; } .oldschool * { box-sizing: content-box; }On twitter.com
♻️ 18 Retweets ❤️ 102 Favorites Mood +6 🙂
-
This feels to me like a prime example of defining a "best practice" around a specific use-case at one point in time – when many sites were mixing components written on different models – and then never updating our advice to reflect the state of the web.Permalink On twitter.com
-
It is easy to override the universal selector with a more targeted selector. It is not easy to create one-off changes in box-sizing (useful!) when you've set it to inherit everywhere. The old "best practice" strongly favors a single use-case that I haven't hit in years.Permalink On twitter.com
-
When we inherit box properties, one-off cases are weird: .one-off { box-sizing: content-box; } /* also need to override direct children, to flip it back… */ .one-off > * { box-sizing: border-box; } That makes way less sense than being explicit in the first place.Permalink On twitter.com
-
* { box-sizing: border-box; } .single { box-sizing: content-box; } .old * { box-sizing: content-box; } vs: html { box-sizing: border-box; } * { box-sizing: inherit; } .single { box-sizing: content-box; } .single > * { box-sizing: border-box; } .old { box-sizing: content-box; }Permalink On twitter.com