DEV Community

loading...

Reset or not Reset CSS?

henrique profile image Henrique Macedo ・1 min read

In my last 4 or 5 projects I dropped the reset CSS and just add this:

* {
  box-sizing: border-box;
}

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

CSS reset is great, sure! Saves a lot of hours of tests... and a lot of headaches. But have you tried removing the reset css from your project and see if it makes a big difference? After using a reset CSS already looked at your project with an accessibility perspective?

Discussion (10)

pic
Editor guide
Collapse
equinusocio profile image
Mattia Astorino • Edited

Css resets are almost useless since they are invasive, opinionated and not wcag compliant. You need to reset only based on your browser support. Postcss-normalize allows you to include only the normalizations (not opinionated) you need based on your browserlist.

Ps: you should fix the box-sizing declaration.

Collapse
henrique profile image
Henrique Macedo Author

Ps: you should fix the box-sizing declaration.

Can you explain?

Collapse
equinusocio profile image
Mattia Astorino

You have to set box-sizing on the html and let elements inherit the property value. By this way you can set a default box-sizing but still able change the behaviour when you need it.

html {
  box-sizing: border-box;
}

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

More info here

Collapse
justinryder profile image
Justin Ryder

I always like to apply it to pseudo elements as well.

*,
*:before,
*:after {
  box-sizing: border-box;
}
Collapse
keinchy profile image
Frederick Jaime

i only include css reset for enterprise work, everything else just gets box-sizing and remove body margin.

Collapse
henrique profile image
Henrique Macedo Author

Why just enterprise work? Saves work time?

Collapse
equinusocio profile image
Mattia Astorino

@henrique I will remove the html tag since this post is not directly related to this language. If you to talk about it please drop me a pm.

Collapse
mattdevio profile image
Matt G

Normalize.css + border-box + 62.5% font size is what I usually go with. It's nice that I don't have to think about some of these styles.

Collapse
notriddle profile image