Difference Between Normalize.Css and Reset Css

What is the difference between Normalize.css and Reset CSS?

I work on normalize.css.

The main differences are:

1. Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.

2. Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.

3. Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.

4. Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.

5. Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

I've written in greater detail about this in an article about normalize.css

What are the advantages of using a reset style sheet instead of all:unset?

Using all: unset revert all the styling to its initial value or inherent value. and the initial values sometimes are not like the user-agent one that every browser defines differently (one example is that the initial value for display is inline and not block). using "Normalize" builds and reverts the styles on top of the user-agent defaults.

in the future you could use all: revert that revert to the user-agent styling.

CSS Reset+Normalize?

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.

Does the Normalize.css works fine if I add it as second css stylesheet or does it overwrite something?

Normalize.css overwrites lots of things. That's the point of it.

Your rules might be written in such a way that they are more specific that the ones in normalize.css, or they might not.

Should I customize the normalize.css file?

I decided to use Normalize.css and Reset.css to write my own defaults.

What exactly does normalization in CSS do?

Normalizing css tries to even out the differences between browsers when rendering html-elements. Many browser have "pre-settings": p and h-elements have vertical margins, lists have some margin and padding too. em and strong tags have bold font-weight.

All this pre-settings are reset, so that you have a consistent working-base in all the browsers.

JSFiddles normalize.css looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

The sense of normalizing css is debatable, since you have to redeclare every style manually in your stylesheet (even those presettings who make good sense, e.g. a simple font-weight on the em and strong tags which are treated equally by the browsers).

I used Eric Meyer's reset for some time, but stopped using it, since it reset far too many styles which needed redeclaration again. It wasn't worth it IMO.

For a REAL good style-normalizer take a look at the style.css from http://html5boilerplate.com/.

---

Related Topics