CSS Reset+Normalize?

Question

I’ve been wondering, would there be any huge issues with using both normalize.css and some sort of CSS reset? I’ve been digging around and all the articles I’ve come across only talk abut them in an either-or fashion, but nothing about combining the two.

I admittedly have little experience with normalizing CSS but to me it would seem ideal to use normalize.css to start with near-ideal cross-browser consistency, then add your CSS reset of choice.

Would there be anything wrong with this approach?

Thanks.

Answer 1

I wouldn't say it's "wrong" loading normalize.css and then loading a reset.css. It just isn't very efficient or helpful. What's going to happen is the browser is going to load all the styles from normalize.css and then remove all the styles from normalize.css after loading the reset.css. So the reset in other words is just going to "remove" any styles that normalize and browser had in the first place. So at that point it would be better to just use the reset.css and not use normalize.css. That is one less file for the user to download and will make inspecting the site using developer tools less confusing.

The reset brings everything to 0 and then you must build up every single style.

Normalize.css instead makes the default styles that come with web browsers look the same. The reasoning behind that is the browser default styles typically are helpful and as you are working you can be rest assured that if you forget to set a size for the <h1> for example the <h1> will inherit the default style and render larger than other headings.