Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

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

Tweet

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!

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!

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.