DEV Community

loading...

Dos & Don'ts For Resetting CSS

Rupak Dey
Web Dev | React | Python
Updated on ・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode


2. DO reset margins & paddings

* {
   margin : 0;
   padding : 0;
}
Enter fullscreen mode Exit fullscreen mode

or

body {
   margin : 0;
   padding : 0;
}
Enter fullscreen mode Exit fullscreen mode


3. DO reset form elements

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


4. DON'T remove list styles


ul, li {
   list-style : none;
}
Enter fullscreen mode Exit fullscreen mode

instead remove from specific elements within

.navigation {
   list-style: none;
}
Enter fullscreen mode Exit fullscreen mode


5. DON'T remove focus styles


:focus {
   outline : none;
}
Enter fullscreen mode Exit fullscreen mode

instead you can change it's style

:focus {
   outline: none;
   box-shadow: 0 0 0 2px #565663;
}
Enter fullscreen mode Exit fullscreen mode


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

Discussion (3)

Collapse
perpetual_education profile image
perpetual . education

We basically drop these two in there: RESET: meyerweb.com/eric/tools/css/reset and then paulirish.com/2012/box-sizing-bord... -- but also a bunch of other setup for images and things.

We really only use bulleted lists in articles so, we do reset those - and things like links / and then replace their styles in the article only for CMS content dumps.

Collapse
deyrupak profile image
Rupak Dey Author

Nice content!

Collapse
braydentw profile image
Brayden W ⚡️

Agreed, removing styles is not a great idea.