UX Design and Development course

* { Box-sizing: Border-box } FTW

source

One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.

Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding.

A great in-depth article in the rise of this CSS attribute. As suggested in the article, the following code 'should' be added to your CSS:

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

At this time according to caniuse.com, the -webkit- vendor prefix is not necessary unless you need to support legacy versions of iOS Safari, Android and Blackberry.

Performance

You might get up in arms about the universal * selector.

Apparently you’ve heard its slow. Firstly, it’s not. It is as fast as h1 as a selector. It can be slow when you specifically use it like .foo > *, so don’t do that. Aside from that, you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If you aren’t getting 90+ Page Speed scores, it’s way too early to be thinking about selector optimization. See also: CSS Selector Performance has changed! (For the better) by Nicole Sullivan.

So… enjoy and hope you’ll find this a far more natural layout model.