Quite an old subject but I think the problem is still not well understood among webdevelopers.
Simple answer:
Probably both
Sounds strange? Let me explain you why.
What does reset.css do?
I'm going to describe Eric Meyer's reset as, in my personal opinion, is the best one.
The most important part is resetting margins, paddings, borders, removing list-style for common elements such as headers, lists, tables.
What does normalize.css do?
Normalize.css tries to remove style differences between the browsers by setting proper display, font sizes, margins, paddings for various elements (and a lot of magic tricks you would never think about).
I highly recommend to look at the current content of normalize.css.
So what's the problem with it?
What do modern pages consist of? Mostly cards, boxes, media boxes, tweets, posts, stylish navigations etc. Just look at the services used everyday: facebook, twitter, BBC.
A few examples of such elements
<!-- Simple box -->
<section class="box">
<h1 class="box__title">Example title</h1>
<div class="box__content">Lorem...</div>
</section>
<!-- 2 level navigation -->
<nav class="main-nav">
<ol class="main-nav__wrapper">
<li class="main-nav__item">
<a class="main-nav__item__link" href="/">Home</a>
</li>
<li>
<a class="main-nav__item__link" href="/page">Page</a>
</li>
</ol>
</nav>
<!-- "Suggested links" box -->
<section class="suggested-links">
<h1 class="suggested-links__title">Suggested links</h1>
<ul class="suggested-links__list">
<li class="suggested-links__list__link"><a href="#">Example suggested link 1</a></li>
<li class="suggested-links__list__link"><a href="#">Example suggested link 2</a></li>
<li class="suggested-links__list__link"><a href="#">Example suggested link 3</a></li>
</ul>
</section>
As you see they use headers (h1), lists (ul, li) and the other elements with default margins, paddings, list-style. If you use only normalize.css then you need to reset manually the styles for every component you make.
Reset.css handles that hassle for you.
Wait... Does it mean that everyone is wrong about normalize.css? No, they're right! If you read normalize.css carefully you notice a lot of exotic rules that none of popular resetters have, but if you want to avoid the problem described above you need a global reset. It might be reset.css or custom made. Just read further.
normalize.css + reset.css
The easiest solution. First include normalize.css and soon after reset.css
@import "normalize"
@import "reset"
// Other styles
Currently they are not colliding (normalize.css 4.2.0 and reset.css 2.0) so it is safe.
What about my bullet lists and the rest?
Well. You can use normalize.css + custom reset technique or try something different.
Introducing "typography" component.
The "typography" component contains all the styles related to block of texts that might contain headers, paragraphs, lists, blockquotes etc and customize them to your needs.
Example lists of the elements to style within typography component.
- https://github.com/twbs/bootstrap/blob/master/less/type.less
- https://github.com/imperavi/kube/blob/master/src/_scss/components/_typography.scss
- Very good http://devinhunt.github.io/typebase.css/
.typography {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { margin: 10px 0; line-height: 1.5; }
ul { list-style: circle; padding-left: 30px; }
}
Example usage
<article class="typography">
<h1>Example title</h1>
<p>
Dolore esse do dolore labore cupidatat amet adipisicing.
Ad dolor laborum mollit non ex cillum excepteur veniam proident laboris dolor labore nulla.
Aliqua enim ullamco enim aute dolor pariatur.
</p>
<ul>
<li>List element 1</li>
<li>List element 2</li>
<li>List element 3</li>
</ul>
</article>
<!-- short text block -->
<section class="box">
<h1 class="box__title">Example title</h1>
<div class="box__content typography">
<p>
Dolore esse do dolore labore cupidatat amet adipisicing. Ad dolor laborum mollit non ex cillum excepteur veniam.
</p>
<p>
Dolore esse do dolore labore cupidatat amet adipisicing. Ad dolor laborum mollit non ex cillum excepteur veniam.
</p>
</div>
</section>
normalize.css + custom reset
Just include normalize.css at the top of you main css file and reset the elements you need soon after
// Reset styles for elements that you need
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
// more resets suitable for your needs
Twitter uses this technique
// normalize.css content ...
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,figure,p,pre {
margin: 0
}
Hope it will help :)