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

Question

I know what CSS Reset is, but recently I heard about this new thing called Normalize.css

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

What is the difference between normalizing CSS and resetting CSS?

Is it just a new buzz word for the CSS Reset?

Vole

Answer 1

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

Melamie

Quite often, you don't leave them at zero (when using reset), so you're actually writing less code. If you do want to zero out some values, then that style is coupled to the element it is meant for and should ease debugging. – Melamie

And THAT is a significant problem with many resets, including the fact that zeroing everything out also slows the browser down. – Dimmick

And THAT is also the advantage of resets - normalize misses sizing issues like this: github.com/yahoo/pure/issues/395 – Seiden

Do I miss the point when I think that, yes, normally you don't want padding and margin to be zero but, no, you don't want the default either? – Occipital

Personally I've gone off Normalize, although I still use it. A lot of the points here are really overblown (better documentation...?). Normalize is opinionated, so it does impose a visual starting point upon you (despite what this answer says). It can also become outdated. Reset.css can never become outdated after you use it. And you're more likely to want margins and padding to be 0 than any other number you can think of, so it's actually helpful to have everything reset when you're developing. Normalize is good for browser issues, however, and that is the main reason I use it. – Telluric

Possible use unicode UTF-8 with normalize.. i think not work its, a example codepen.io/KingRider/pen/QGeMoQ is work base normalize, check config codepen (i.imgur.com/alt3Rvj.png) is how to make its? without config – Patentee

Answer 2

The major difference is that:

• CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself.

• Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.

If your design a) follows common conventions for typography et cetera, and b) Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.

Eldon

@Jitendra Vyas: -- there is really only one way: read the well-commented Normalize.CSS code, and decide if it's a good fit for your needs or not. github.com/necolas/normalize.css/blob/master/normalize.css – Eldon

Another note: Normalize.css aims to be as unobtrusive as possible, which allows a developer to write their code easier without having to fight specificity conflicts. – Rabble

so lets say i wanna use reset when developing. And once done i want normalize.css or some JS that takes all the things i have not changed and are the same in browser. Or i have changed and after changing they have become the same as in browser and remove them for client side. So reset would help while developing that 'program' in faster client side. Both happy. And much smarter way to live. – Wagonette

In practice you'll end up overwriting all of Normalize's styles anyway. The theory is great, but in this OOCSS world it never works that way in practice. – Telluric

Answer 3

Normalize.css is mainly a set of styles, based on what its author thought would look good, and make it look consistent across browsers. Reset basically strips styling from elements so you have more control over the styling of everything.

I use both.

Some styles from Reset, some from Normalize.css. For example, from Normalize.css, there's a style to make sure all input elements have the same font, which doesn't occur (between text inputs and textareas). Reset has no such style, so inputs have different fonts, which is not normally wanted.

So bascially, using the two CSS files does a better job 'Equalizing' everything ;)

regards!

Wurst

This is a good, pragmatic answer. It's not necessarily one or the other. Take what you want from each. I like a full reset, but Normalizer offers some nice bits and pieces that work well ontop. – Eec

@ricmetalster, so did you have to re-write your own css in order to combine functionalities from reset.css and normalize.css? – Rutledge

If you wished to use both, could you list "reset" first then "normalize" then add your styles on top? – Along

I take the "don't over think it" approach and use both and call them in as includes in my SASS imports @import '_normalize' && '_reset' – Tomfool

Answer 4

Well from its description it appears it tries to make the user agent's default style consistent across all browsers rather than stripping away all the default styling as a reset would.

Preserves useful defaults, unlike many CSS resets.

Bran

So is better to use Normalize css over Reset? – Vole

@Jitendra Vyas — no. The tools are different, not better or worse then each other. Pick the one that helps you solve the problems you have best. – Hannigan

I would have to argue that normalization is better than resetting. It will result in less CSS being transferred across the wire, better use of UA defaults, and a better understanding of how elements are meant to display. – Devotion

Answer 5

First reset.css is the worst library you can use, because it removes the standard structure of HTML and displays everything you write just as text, after assigning the values of margin padding and other attributes to 0. So for example you will find that <H1>, will be the same as <H6>.

On the other hand Normalize.css uses the standard structure and also fixes almost all the errors existing in it. For example it fixes the problem with showing a form from one browser to another. Normalize fixes this by modifying this features so your elements will be shown the same on all browsers.

Harve

Depends upon your use-case. Considering your example, if I need to modify the font styles of all heading tags for my project, I won't really have any use of the default values, will I? One shouldn't label a library as being the "worst" just because one cannot find a use in one's own projects. – Mizell

One of reset's main purpose is to combat issues that rise from browser applied styles which is very useful. I also think it shouldn't be considered a library. – Tiflis

@gdebojyoti There are some use cases, but I very rarely want all of my headings to be the same size, regardless of their respective font styles. – Scaramouch

Answer 6

resetting seems a necessity to meet custom design specifications, especially on complex, non-boilerplate type design projects. It sounds as though normalizing is a good way to proceed with purely web programming in mind, but oftentimes websites are a marriage between web programming and UI/UX design rules.

Kondon

It's overkill 99% of use cases. – Queenstown

@Queenstown which one? reset or normalise ? (Just trying to understand people's mind on the subject) – Apart

@Apart both reset and normalize. Knowing the default CSS values for each element is part of being a good front end developer. I see them as brute forces methods that are unnecessary. – Queenstown

@Queenstown > Knowing the default CSS values for each element is part of being a good front end developer - this is akin to saying you would rather work with electrons rather than a programming language, because that's what makes a good developer. Using tools efficiently makes someone a good developer, the other way around usually falls in the category of time-wasting zealots – Funky

Answer 7

This question has been answered already several times, I'll short summary for each of them, an example and insights as of September 2019:

• Normalize.css - as the name suggests, it normalizes styles in the browsers for their user agents, i.e. makes them the same across all browsers due to the reason by default they're slightly different.

Example: <h1> tag inside <section> by default Google Chrome will make smaller than the "expected" size of <h1> tag. Microsoft Edge on the other hand is making the "expected" size of <h1> tag. Normalize.css will make it consistent.

Current status: the npm repository shows that normalize.css package has currently more than 500k downloads per week. GitHub stars in the project of the repository are more than 36k.

• Reset CSS - as the name suggests, it resets all styles, i.e. it removes all browser's user agent styles.

Example: it would do something like that below:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Current status: it's much less popular than Normalize.css, the reset-css package shows it's something around 26k downloads per week. GitHub stars are only 200, as it can be noticed from the project's repository.

Johnettajohnette

Answer 8

Sometimes, the best solution is to use both. Sometimes, it is to use neither. And sometimes, it is to use one or the other. If you want all the styles, including margin and padding reset across all browsers, use reset.css. Then apply all decorations and stylings yourself. If you simply like the built-in stylings but want more cross-browser synchronicity i.e. normalizations then use normalize.css. But if you choose to use both reset.css and normalize.css, link the reset.css stylesheet first and then the normalize.css stylesheet (immediately) afterwards. Sometimes it's not always a matter of which is better, but when to use which one versus when to use both versus when to use neither. IMHO.

Shlomo

Answer 9

Normalize.css

Normalize.css is a small CSS file that provides cross-browser consistency in the default styling of HTML elements.

That means, that if we look at the W3C standards of the styles applied by the browsers, and there is an in inconsistency in one of the browsers, the normalize.css styles will fix the browser style that has the difference.

But in some cases we can’t fix the faulty browsers according to the standard, usually because of IE or EDGE. In these cases the fixes in the Normalize will apply the IE or EDGE styles to the rest of the browsers.

Real life example

Chrome, Safari and Firefox render <h1> tags that are inside an <article>/ <aside>/ <nav>/ <section> tag with a font-size that is smaller than an independent tag, and with a different margin size. These are the user agent styles in Chrome, Safari and Firefox in the case of an <h1> tag inside an <article>/ <aside>/ <nav>/ <section>

Tag

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   }

Example:

/* 
 Correct the font size and margin on `h1` elements within `section`  and `article` 
 contexts in Chrome, Firefox, and Safari.
 */
  h1 {  font-size: 2em;  margin: 0.67em 0;}

Reset CSS

Reset CSS takes a different approach and says that we don’t need the browsers’ default styles at all. Whatever styles we need, we’ll define in the project according to our needs. So “CSS Reset” resets all of the styles that come with the browser’s user agent.

This approach works well in the above example, with those <h1> to <h6> default styles: most of the time we want neither the browsers’ default font-size nor the browser’s default margin.

Here is an example of what a small part of CSS Reset looks like

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baseline; 
}

In the CSS Reset way, we define all HTML tags to have no padding, no margin, no border, the same font-size and the same alignments.

The problem with CSS Resets is that they are ugly: they have a big chain of selectors, and they make a lot of unnecessary overrides. And even worse, they are unreadable when debugging.

But still there are styles we prefer to reset like <h1> to <h6>, <ul>,<li> and etc.

Swamper

Answer 10

Normalize.css :Every browser is coming with some default css styles that will, for example, add padding around a paragraph or title.If you add the normalize style sheet all those browser default rules will be reset so for this instance 0px padding on tags.Here is a couple of links for more details: https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/

Abradant