Make programming easier

Reset.css or normalize.css

Introduction

Łukasz Kużyński

Łukasz Kużyński

Frontend and backend developer with almost 10 year of experience. Passionated about programming, computers and how things work.


Reset.css or normalize.css

Posted by Łukasz Kużyński on .
Featured

Reset.css or normalize.css

Posted by Łukasz Kużyński on .

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.

.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 :)

Łukasz Kużyński

Łukasz Kużyński

Frontend and backend developer with almost 10 year of experience. Passionated about programming, computers and how things work.

View Comments...