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
Top comments (3)
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
articlesso, we do reset those - and things like links / and then replace their styles in the article only for CMS content dumps.Nice content!
Agreed, removing styles is not a great idea.