Simple CSS Reset

Remember when everyone, and I really mean everyone, was using Eric Meyer’s CSS reset? Those were the days! Today we can get away with a much simpler reset as all modern browsers tend to have a pretty decent (and similar!) starting point.

The below reset utilises box-sizing: border-box;. The default is box-sizing: content-box; which makes an elements padding a part of the elements width, so a 100px div with 20px of padding would end up being 120px which can be incredibly frustrating, especially on large sites or complex areas. box-sizing: border-box; doesn’t do that and aims to solve the issue globally across your site.

*,
*:before,
*:after {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
border: 0;
font-size: 100%;
line-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

Advertisement


Comments are closed for this post.

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.