Using a CSS reset

What's a reset?

A CSS reset is a set of rules that you can add in your code that usually provides better defaults. You don't need to install or add dependencies, it is as simple as copy & pasting it in your code. In a way, it provides a blank canvas to start your project on. This reset from Josh Comeau is an example. This reset from Andy Bell is an another example

What does it do?

It provides better defaults depending on the type of project. Most resets typically share some lines of code and it doesn't matter that much depending on the type of project. What I mean by "type of project" is text-heavy sites like blogs, heavily-customized sites like landing pages, sites that use a different CSS approach like Atomic CSS.

A code example that can be normally found in most resets is this:

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

What should I use?

If your site is more text-heavy and similar to blogs, use Andy Bell's. If your site is more customized and similar to landing pages, use Josh Comeau's. You might have heard of other resets like meyerweb or normalize but they're quite old and not that much used anymore.

Don't forget that you can always customize the resets by yourself!

Summary

• A CSS reset is set of rules that you can add in your CSS code.
• It typically resets browser defaults.
• You can customize the resets on your own.