Fraser Boag

My preferred CSS (Sass) reset

Snippets
22nd November 2019

Note: You can grab this reset in Sass, SCSS and compiled, minifed CSS from Github.

As the old adage goes, CSS resets are like assholes: everybody’s got one. Personally I like mine to obliterate everything – let me show you.

First things first, credit where it’s due. This reset is heavily inspired by Eric Meyer’s CSS reset. A couple of years ago I directly converted it to Sass so I could bundle it with the rest of my styles, and have added a few rules of my own over time.

Other than the usual “set everything to zero” stuff you’d expect from a full reset, there are a couple of little additions I’ve dropped in to neutralise some browser quirks – for example setting box-sizing: border-box on everything, and forcing some defaults for text-rendering, -webkit-font-smoothing and text-size-adjust. Your mileage may vary with this stuff, but I find myself using these settings in almost every project.

The Sass reset

Yes, I’m one of those lunatics who uses pure Sass syntax – I like how it looks, ok? Don’t worry – there’s an SCSS version below as well.

*, *:before, *:after
    box-sizing: border-box

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video
    margin: 0
    padding: 0
    border: 0
    font-size: 100%
    font: inherit
    vertical-align: baseline
    text-rendering: optimizeLegibility
    -webkit-font-smoothing: antialiased
    text-size-adjust: none

footer, header, nav, section, main
    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

input
    -webkit-appearance: none
    border-radius: 0

The SCSS reset

*, *:before, *:after{
    box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
}

footer, header, nav, section, main{
    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;
}

input{
    -webkit-appearance: none;
    border-radius: 0;
}

Thanks to Icons8 for the header illustration.

What do you think?

I genuinely love to talk web. If you have any civil thoughts, corrections or comments on this note, feel free to tweet or DM @fraserboag or, if you prefer, email fraser.boag@gmail.com.

Tweet

Let me send you emails

From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and you'll hear about it!