I’m not going to enter the debate about wether it’s good or not to use a CSS Reset, but I have to admit it’s often useful.

If you’re like me and mostly use Eric Meyer’s one, you know he recently updated his code to version 2. This version brings –obviously– some improvements to the previous one, e.g. he added support for HTML5 tags.

I don’t like to use bits of code I don’t need, so I came up with a slightly tweaked version of the original snippet.

What I did is very easy and quite straight forward :

  • write multiple selectors on the same line
  • insert blank line between rules
  • omit deprecated tags in HTML5
  • add a common clearfix (based on HTML5 Boilerplate)

Yes, I added a clearfix. It's not really part of a so-called CSS Reset but it's often useful. This is another debate about (clearing) floated elements but it may be the less tricky option, depending on what you can or want to do. In that case, a clearfix helps you a lot.

Did I miss something? You have a suggestion? I’m not omniscient so feel free to comment below and help me improve this snippet.

/* CSS Reset based on Eric Meyer's one : http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}