
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.
Yes, I'm one of those lunatics who likes pure Sass syntax. Don't worry - you can scroll down for an SCSS version below.
*, *: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
Same as above, but this time with brackets and semi-colons - compliant to CSS and SCSS syntax.
*, *: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;
}
Enjoy! Don't forget you can download both versions, as well as minified CSS over on GitHub.
I love to talk web. If you have any civil thoughts, corrections or comments on this post, feel free to tweet or DM @fraserboag or, if you prefer, email fraser.boag@gmail.com.
From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and I'll make sure you hear about it!