* { box-sizing: border-box; } FTW

Paul Irish on HTML element widths being inclusive of padding at all times. That is to say if I define my box as 200 pixels wide then it should stay at a total of 200 pixels, no matter what I use for its padding value.

The money shot is as follows:

* { /* apply a natural box layout model to all elements */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

Also, an interesting read on using * and its impact on 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 aren’t getting 90+ Page Speed scores, its way too early to be thinking about selector optimization.

As with most CSS, there’s no one-size-fits-all choice for this. At times it makes sense (it’s used on the WordPress.com Theme Showcase, selectively though) and at other times it doesn’t.

I like it, though.

Head over to Irish’s site to weigh in or drop a comment here with your thoughts.

4 thoughts on “* { box-sizing: border-box; } FTW”

  1. Might want to add -ms-box-sizing:border-box; to that list!

    I’ve been a huge fan of this for years. The best usecase, I’ve found, is for those situations where you need to style a textarea. You want to combine width: 100%; with a custom border, and if you’re not using box-sizing, that’ll make your textarea 100% plus border width.

    Adding it to * seems a bit heavy handed, though.

    1. Not sure -ms-box-sizing:border-box; is necessary in this case since IE8 and up will pick up the non-prefixed declaration. Your point about * is a good one. I don’t think I’ve ever really been comfortable using * for anything, if only because it makes me feel weird. Horrible reasoning but the heart wants what the heart wants, which in this case is to never see * used in this manner.

      1. If the * works for people, peace be with that. But it just makes me feel nervous — makes it feel unpredictable somehow.

Comments are closed.