Four CSS tips that have changed me

This post is outdated.

CSS is impossibly weird. These four tricks have helped me mitigate its weirdness and have saved me hecka time:

The reset

The first thing in your CSS should be a CSS reset, which helps keep pages more consistent across browsers by overriding their default styles. Eric Meyer’s CSS reset is the one I use. I’d also recommend normalize.css, which sets up a bunch of sensible defaults and fixes a bunch of subtle browser inconsistencies.

border-box

The CSS box model is funky. If I give something a width of 400px and a 10px padding, its rendered width will be 420px. That’s no way to live. That’s hell.

Enter box-sizing: border-box. My website has the following code, at Paul Irish’s recommendation:

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

I add padding recklessly, not worrying that my element’s going to be destroyed. Very helpful when you want to size things like you’re sane. This little bit of CSS has probably saved me millenia.

For more, check out CSS Tricks’s article about box sizing. If you need support in IE6 and 7, there’s a polyfill.

display: table

Update: The “right way” to do this stuff is now with flexbox.

It’s pretty well-known that you don’t use tables for layout; you use CSS. But let’s be real: table-based layouts were easier. Want two things to be the same height and aligned horizontally? Don’t want to use tables? Welcome to hell.

Enter display: table and its buddies. This allows you to make a container element act like a table and inner elements act like table cells. Anup Shah has a great piece on his blog about its use, which I’d recommend reading.

Most notably, it lets you do vertical centering real nice (here’s a demo):

The HTML:

<div class="outer-container">
  <div class="inner-container">
    This text is going to be vertically <em>and</em> horizontally
    centered. Get on this level
  </div>
</div>

The CSS:

.outer-container {
  display: table;
}

.outer-container .inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Sweet damn. Don’t tell me that CSS doesn’t cut you to the core.

There’s a polyfill for that

You can’t read about web development without seeing oceans of new HTML5/CSS3 features. They’re supported in modern browsers, but not in old Internet Explorer, or old Firefox, or odd-numbered versions of Opera. If you want a feature that’s not in a target browser of yours, you can frequently apply a polyfill to recreate the feature in old browsers.

For those who don’t know, a polyfill is some code you include on your page that “fills in” old browsers. If IE6 doesn’t support border-radius, include a polyfill and you’ll have it on old IE. Go take a look at Modernizr’s huge list of polyfills if you need one.

While this isn’t really a CSS trick, it does give you “permission” to use Super Cool CSS3 Features and not fear that older browsers will buckle.

Cool Bonus Tip™: use a preprocessor

If you aren’t using SASS or LESS or Stylus or Roole, start today. I don’t even…I don’t even want to talk about it. Trust me. It will save you more time than any of the other tips.

Happy CSSing, my friend.