There was some discussion last summer about changing the generally accepted best practice implementation of box-sizing in CSS. Something about it didn’t quite sit well with me when I saw it, but I didn’t really suss out what it was until I started on a book project (more on that later).

The previously accepted practice was proposed in a blog post by Paul Irish (the post has been updated so I’ve duplicated the code in a slightly modernized format (no browser prefixes) below).

The latest accepted practice is:

The main benefit of the latest practice is that you can have an entire widget (or component) that uses a different box-sizing model easily. This makes sense if you have to do it a lot, but in my experience this change to standard behavior is not needed very often. The box-sizing will only apply to block-ish elements and it’s not terribly difficult to override the box-sizing in your CSS exactly where you need it (you can even create a @mixin or @extend-only selector). However, if a developer on the project sets box-sizing higher up in your DOM without anyone realizing it, then the style would cascade throughout many elements via the inherit and is likely to break the layout – possibly in difficult to debug ways.

There are certain styles that you expect to be automatically inherited (mostly font-related). You don’t expect something like box-sizing to be inherited and that’s where the surprise comes in. We should always be working to minimize surprises in our work and I don’t think that inheriting box-sizing does that. Sometimes a little surprise is acceptable for a bigger gain, but inherited box-sizing doesn’t provide enough gain.

Aside: I much prefer the name “Principle of Least Surprise” to “Principle of Least Astonishment” http://en.wikipedia.org/wiki/Principle_of_least_astonishment.