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;
}

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

pic
Editor guide
 

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.

 

Ps: you should fix the box-sizing declaration.

Can you explain?

 

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

 

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

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

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

 

Why just enterprise work? Saves work time?

 

@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.

 

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.