Reset CSS: O que é, exemplos, como Criar e usar

Na Alura, faço parte da equipe do Apoio Educacional e em meio a várias dúvidas que surgem no fórum, algumas são direcionadas à prática do reset CSS.

Nesse artigo, vamos entender melhor como funciona essa técnica de CSS style reset.

Reset CSS: o que é?

O Reset.CSS, ou CSS reset, é uma técnica ou conjunto de estilos CSS projetados para normalizar o estilo padrão dos elementos HTML em todos os navegadores da web.

O objetivo é criar uma base consistente e previsível para o desenvolvimento web, independentemente das variações de estilo padrão entre diferentes navegadores.

Cada navegador tem a sua apresentação por padrão e esse comportamento individualizado pode gerar conflitos de layout diante do seu projeto web.

Esse era um problema muito comum, enfrentado por programadores e programadoras Front-end.

Apesar de ser uma técnica *simples, chegar em um consenso mínimo sobre como “forçar” todos os navegadores a terem o mesmo comportamento, não foi fácil.

Em 2007, Eric Meyer (falaremos dele mais a frente) em seu blog, levantou a discussão de como lidar com essas inconsistências dos navegadores e gerou um grande debate.

Essas inconstâncias que os navegadores apresentam no momento de exibir ou renderizar elementos, podem ser sutis ou mais grosseiras, como, por exemplo, medidas diferentes para o margin superior e inferior em títulos ou a altura da linha padrão, o que poderá afetar profundamente as alturas dos elementos e alinhamentos.

Exemplos de como se comporta o reset CSS

Confira alguns exemplos de como o reset CSS se comporta quando usado em diferentes situações (em ambos os exemplos, foram feitos no navegador Firefox):

comResetCSS

semResetCSS

Conseguimos observar grandes diferenças do que o reset CSS pode fazer com o layout. Resetamos tags que tinham valores iniciais, o que ocasionava uma pré-formatação e nos retornava um estilo básico, como nas tags h1, a, body, etc.

A técnica do reset CSS é uma forma de suavizar estas diferenças e padronizar a estilização, sobrepondo a formatação original do browsers com uma folha de estilo.

Assim, o reset CSS se tornou um arquivo quase que obrigatório em cada projeto web existente.

Como criar o Reset CSS?

Compreendemos que para reduzirmos as formatações originais entre diferentes navegadores, precisamos selecionar todas as tags e adicionar sobre elas os resets, como margin, padding, border, etc.

Cada pessoa pode criar o seu próprio reset CSS a partir da necessidade do seu projeto ou pode também utilizar algum reset pronto.

Um dos mais utilizados e conhecidos foi desenvolvido pelo Eric Meyer. No [blog] (https://meyerweb.com/eric/tools/css/reset/), ele explica um pouco sobre a técnica e como desenvolveu o seu código reset.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Veja que ele divide as tags em grupos que devem receber valores genéricos, como margin: 0 , border: 0 , padding: 0 e outras que precisam de valores mais específicos, como:

ol, ul {
    list-style: none;
}

No exemplo, ele retira o estilo padrão da tag que utiliza círculos nos destaque dos itens de lista não ordenada.

Há formas simplificadas também que, particularmente, utilizo mais em meus projetos, como o uso de seletores universais:

*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    font-size: 100%;
    list-style-type: none;
}

Assim, se for necessário adicionar valores às propriedades, pode adicionar.

Como utilizar?

Em seu arquivo HTML, dentro da tag head, utilize a tag link, para chamar o arquivo em que estará o seu reset CSS, como no exemplo:

<link rel="stylesheet" href="reset.css">

Assim, a aparência do seu arquivo será alterada “resetando” as tags com as propriedades com as quais construiu o seu arquivo reset.

Com o reset CSS adicionado ao projeto, os demais estilos do layout podem ser aplicados sem prejuízo.

Como usar?

Já sabemos que se trata de uma folha de estilo e que podemos usá-la como normalmente utilizamos em um projeto web, seja dentro do arquivo HTML, seja num arquivo externo (e que poderá ser acessado por todos os demais arquivos).

O mais habitual é que antes de se começar a estilizar o projeto, o arquivo reset CSS já seja adicionado para que seja feita a remoção da formatação original dos browsers.

Isso porque, caso o reset CSS seja adicionado no meio do projeto, por exemplo, pode gerar dores de cabeça já que o layout foi criado utilizando como referência a formatação dos navegadores e não na padronização dos elementos que foram resetados.

Normalize: O que é?

A ideia de existir o Normalize CSS é a mesma que do Reset CSS, mas ele possui algumas diferenças importantes na hora de usar.

O principal objetivo do Normalize é deixar consistente a estilização padrão entre os navegadores.

Algumas estilizações padrões dos navegadores que são úteis para o desenvolvimento de páginas são mantidas, alguns bugs comuns entre os navegadores são corrigidos, algumas melhorias de usabilidade e também todo o código do Normalize é comentado e com uma documentação sobre as modificações.

Confira abaixo, as principais diferenças entre Reset CSS e Normalize:

O Reset CSS limpa TODOS os padrões dos navegadores. É uma forma muito agressiva de “limpeza”, enquanto o Normalize ainda mantém padrões que são úteis.
O Normalize CSS corrige alguns bugs que existem nas estilizações padrões dos navegadores.
O Normalize é modular. O código todo é separado por seções específicas, então você pode procurar por mudanças de forma mais direta.
O Normalize tem uma documentação detalhada sobre o uso e justificativas das mudanças feitas por ele.

Como usar o Normalize?

Da mesma forma que o Reset CSS, o Normalize é uma folha de estilos que deve ser importado antes de qualquer estilização no projeto.

Ele deve ser o primeiro arquivo CSS a ser importado no projeto. É importante “limpar” primeiro o projeto antes de começar a desenvolver.

Como implementar o Normalize?

Em seu projeto HTML, dentro da tag head, utilize a tag link, para chamar o arquivo normalize.css, como no exemplo:

<link rel="stylesheet" href="normalize.css">

Assim, seu projeto terá os estilos padrões removidos/alterados, para que você possa escrever sua própria folha de estilos sem se preocupar com estilizações que o navegador coloca por padrão.

Se você ainda não faz parte de Alura e quer saber mais sobre como funciona o CSS style reset e outras técnicas e aprendizados do mundo do Front-End, aqui na Alura temos uma formação de HTML5 e CSS3, na qual você aprenderá muito mais do universo Front-End.

Até o próximo artigo!

Confira outros cursos para aprender mais sobre CSS: