A few words on blanket use of box-sizing: border-box

This is basically just me thinking out loud after reading a few things recently about blanket use of the box-sizing: border-box CSS rule.

When I say “blanket use”, I do of course mean the following:

* {
    box-sizing: border-box;
}

As you’re probably aware, this alters the typical laws of the CSS box model throughout your entire document to ensure that the specified width is always inclusive of padding, rather than in-addition-to. It becomes particularly useful when using percentage based widths with pixel based padding.

This blanket usage has wasted no time in asserting itself among the more mainstream CSS features, with many widely used frameworks (including the juggernaut that is Bootstrap) having implemented it as a standard rule at the head of their base stylesheets. I’ve also seen it in the wilderness more times than I can remember.

The extremely clever and therefore highly trusted Paul Irish even advocated this technique 2 and a half years ago!

Recently however, I’ve seen a more cautious approach encouraged by a couple of people in the industry who I have a huge amount of respect for.

To add to this advice from Peter Gasston, Thierry Koblentz actually spoke quite disdainfully of this blanket usage in his recent blog post, even going so far as to suggest that we stop using box-sizing: border-box altogether in favour of calc() whenever we’re ready to drop support for IE8. (box-sizing: border-box is supported in IE8, calc() isn’t).

Having presented those contradicting arguments, my first thought is how refreshing it is to have people who are at the top of our industry, hold differing views on what is actually best practice. This is in addition to other opposing viewpoints I’ve come across recently, such as using BEM vs not using BEM, using classes everywhere vs using advanced/creative selectors sometimes, and of course, using IDs sometimes vs never using IDs EVER.

The reason I found all this refreshing, is because it reminded me that best practice in CSS is often very subjective. Best practice is what works best for you. If you can justify that your methods work well for you, your team and the end user, then you should feel confident in doing what you’re doing, instead of blindly following what you saw someone else advise.

Anyway, that was a bit of an unintended digression. To continue with my main point, the * { box-sizing: border-box; } rule is something I’ve been using on my own projects for a while now. And this is for the simple reason that I find it easier to work with, and – in my opinion – this is all I need to consider.

You might say I need to consider browser support and the performance implications of using the * selector, which were the arguments Thierry put across to discourage this kind of usage.

In terms of supporting older browsers, we are in this case talking about IE7 and below in particular, as according to caniuse.com, support for this property/value is universal otherwise. I and many others stopped supporting IE7 some time ago now, and when you consider that the total global usage for these browsers is 0.43% (again, according to caniuse.com), it’s clear to see why. On top of this, I can’t imagine that any frequent users of IE7 and below would see many correctly rendered websites throughout their day…

Regarding the wildcard * selector, I have long avoided its use or felt much guilt when failing to do so due its “performance implications”. However, I’ve read quite a lot recently about CSS selector performance which – well – shits on this belief somewhat. All of the tests/articles basically concluded that most of the widely held beliefs about CSS selector speeds are myths and that selector optimisation really isn’t worth your time. Unless of course the rest of your site and your CSS structure in general is optimised to the absolute limit, and CSS selector performance is the only place left that you could possibly try and fine-tune!

• CSS performance revisted by Ben Frain - Ben runs a number of comprehensive tests and finds no significant patterns in terms of consistently slow/fast CSS selectors and therefore assures us we needn’t worry about them.
• CSS Selector Performance has changed! (For the better) - An earlier article on CSS selector performance by Nicole Sullivan who came to similar conclusions.
• Heydon Pickering’s talk at CSS Day – Effortless Style - Heydon only very briefly touches on the performance implications of using * at the end of his talk in the Q&A but it’s such a brilliant talk that you should watch the whole thing anyway.

Further to my points on browser support and performance, it makes sense to me to use either one set of box-model laws or another throughout a project, rather than having to switch my mindset back and forth.

To conclude, if it helps you and has no adverse effects on the user’s experience – which I believe is the case with box-sizing: border-box – then I say go for it. Similarly, if you prefer working with the “classic” box model then do so. As I said, a lot of “best practice” is simply what works best for you.

My mind remains open however and if you feel strongly that blanket use of this property should be avoided for the greater good, then feel free to convince me!