Dos & Don'ts For Resetting CSS

Why reset CSS ?

Main reason is to fix any inconsistencies with default styles between different browsers.

Save It For Later! Let's begin...

1. DO reset box sizing

* {
   box-sizing : border-box;
}

2. DO reset margins & paddings

* {
   margin : 0;
   padding : 0;
}

or

body {
   margin : 0;
   padding : 0;
}

3. DO reset form elements

button,
input,
optgroup,
select,
textarea {
   font-family : inherit;
   font-size : 100%;
   line-height : 1.15;
   margin : 0;
}

4. DON'T remove list styles

❌

ul, li {
   list-style : none;
}

instead remove from specific elements within
✅

.navigation {
   list-style: none;
}

5. DON'T remove focus styles

❌

:focus {
   outline : none;
}

instead you can change it's style
✅

:focus {
   outline: none;
   box-shadow: 0 0 0 2px #565663;
}

They are definitely useful for consistent styling & also gives you a clean slate to work with.

Do you use reset CSS in your projects?
Share your thoughts and let's chat in the comments!

P.S. Want the next post to be on something specific? Do let me know in the comments.

🤘🏻


Connect with me : Github | Tutoring | Freelance Web Dev