Evolving best practices – box sizing

Illustration, three brown boxes, 2 stacked, third leans on the bottom on

When I began learning HTML and CSS in early-2000s the situation when it comes to web standards was bad. Netscape lost the battle with Internet Explorer and web standards weren’t enforced. Basically Microsoft did whatever they wanted because there was almost no competition.

At that time my stance was that Microsoft was wrong and that standards were infallible. One of the things which I hated was box model. The standard was the inside the width of element was only content. In Internet Explorer the width of an element was calculated by width of content, padding and border.

Illustartion of standard box model

Illustration of Internet Explorer's Quirks mode box model

For years my position didn’t change, standards were correct, but my head did not function according to the standards. It was a weird cognitive dissonance where I couldn’t figure out why sizes in my designs didn’t match the sizes on the website. Sometimes they still don’t because I find some sizes better on website than in the graphics editor and that’s completely fine.

The Aha moment came to me when I was watching myself code the Writtery website as a part of 12 weeks design to code challenge. Usually I work with WordPress and my starting theme Underscores has set box-sizing: border-box . This makes the browser treat elements as in IE Quirks mode.

The cognitive load of border-box compared to default sizing is smaller, change in padding means only change in padding, not the whole width. After watching myself to struggle I am sold and I understand more that the standards are written by people who might be experts but they still make bad decisions occasionally.