Se você já precisou criar uma landing page do zero ou, mesmo trabalhando em um projeto já existente, teve que desenvolver uma página completamente nova, eu tenho certeza que vai se identificar com a seguinte situação: após idealizar como seria a estrutura da página, preparar os componentes, você cria toda a estrutura HTML, utiliza os elementos corretos, coloca a estilização necessária e vualá: ESTÁ DESALINHADO ou - no mínimo - bem diferente do que planejou!

Após respirar (é necessário!), pegar outro café e tomar coragem para analisar o que aconteceu, você descobre o motivo: alguns dos elementos HTML que você usou já possuem uma estilização por padrão (default) que está misturando-se com a folha de estilos que você criou. Em razão disso, os seus cálculos ficaram errados e você precisará refazer seus componentes, um por um. Caso você nunca tenha passado por isso, acredito que com essa introdução, já seja possível concordar que é uma situação - no mínimo - irritante.

Porém, esse problema é muito comum e, felizmente, existem desenvolvedores há muitos anos que encontraram formas consolidadas para evitar esse tipo de dor de cabeça. A mais famosa dessas práticas popularizou-se muitos anos atrás, e é conhecida como Reset CSS. Tendo em vista que, apesar da larga adoção desse mecanismo por inúmeras aplicações/sistemas web, esse conceito é cheio de fundamentos, esse artigo tem por objetivo explicar o que esse “reset” significa. Além disso, trarei detalhes sobre os benefícios da sua utilização e exemplos práticos para que você possa começar a utilizá-lo hoje mesmo.

O que é CSS

Antes de aprofundarmos nosso conhecimento, é importante fazer um nivelamente para garantir que possamos evoluir juntos (se você já usa - e sabe o que é - CSS, pule para a próxima seção 😉). CSS é o acrônimo para Cascading Style Sheets ou, numa tradução livre, Folhas de Estilos em Cascata. Apesar do nome difícil, entender o seu funcionamento não é tão complicado: arquivos CSS são arquivos que contém uma linguagem de estilização, utilizada para criar customizações em páginas HTML (por isso é muito difícil falar de um, sem falar do outro). Em resumo, CSS é quem nos permite dar vida (cores, formas, espaçamento) às nossas páginas. E para garantir que ficou claro, gostaria de compartilhar com você uma imagem - bem didática - sobre a relação entre HTML (a estrutura) > CSS (o estilo) > JavaScript (a lógica):

O padrão da web

Ao utilizarmos HTML e CSS enquanto criamos nossas páginas web, estamos fadados a herdar os estilos CSS default que os elementos HTML possuem. Para que isso fique mais claro, deixei esse link abaixo em destaque: ao abrí-lo, você encontrará o valor CSS default de todos elementos HTML.

https://www.w3schools.com/cssref/css_default_values.php

Note que essa tabela contém 120 elementos e demonstra, um por um, quais são seus estilos. No exemplo abaixo, eu decidi pegar o elemento HTML de heading h1 para que possamos ver a diferença. Perceba como o texto não está mais em negrito, como o espaço entre o texto e a borda sumiu (era 0.67em antes) e como - claramente - o segundo é muito menor (antes era 2em). Esse é um exemplo simples para que você entenda que, mesmo sem ver, ao usar certos elementos você já está estilizando sua página.

https://codepen.io/manualdofront/pen/pvzXdmp

O que é o Reset CSS e quando utilizá-lo

Atualmente, em virtude dos browsers modernos e completamente repaginados aos quais temos acesso, talvez não seja mais perceptível qual foi a motivação para esse tipo de técnica. Acontece que, no início, não havia nenhum padrão em como os estilos funcionavam e cada navegador (Google Chrome, Mozilla Firefox, Microsoft Edge - antigo Internet Explorer 🤢 -, Safari e outros mais) implementava suas renderizações de acordo com suas preferências e com o que parecia mais bonito.

Como dito anteriormente, os browsers evoluíram muito e, por isso, hoje não temos grandes divergências entre eles. No entanto, ainda existem certas customizações - tais como border, padding, margin, zoom, fonts - que são usadas para transmitir aquela sensação “única" de determinada empresa (uma forma de branding). O Reset, portanto, nada mais é do que a técnica de reiniciar, manualmente e por conta própria, através de um conjunto de estilos customizados, todas essas características “pré-prontas”, não deixando nada “original de fábrica” - dessa forma, você não verá nenhum estilo que você não tenha escrito ativa e intencionalmente.

Note que eu mencionei “manualmente” e “por conta própria”, o que implicitamente indica que cada desenvolvedor pode fazer o seu, de acordo com suas necessidades e preferências. Caso você tenha tempo/interesse, aconselho que você leia a discussão mais famosa sobre Reset CSS, que deu origem ao arquivo de Reset CSS mais famoso que temos atualmente - o Reset CSS do Eric Meyer. Contudo, ao pesquisar na internet, você encontrará vários outros exemplos: como uma opção mais moderna (por Josh Comeau), e outro que promete ser mais moderno (por Piccalilli). E para que você consiga analisá-los e escolher um (ou talvez criar o seu), gostaria de compartilhar aquelas que são, na minha opinião, as maiores vantagens e desvantagens dessa técnica.

Vantagens

A primeira, e mais fundamental, é ter a habilidade de criar uma estrutura previsível e padronizada para o desenvolvimento web, sem deixar com que as - sutis - variações de estilo entre os navegadores influenciem o layout (ou padrão) da sua página.
Para aqueles desenvolvedores mais perfeccionistas e que desejam “ter controle sobre tudo”, resetar o CSS fará com que - obrigatoriamente - seja necessário “lembrar-se” de estilizar todos os elementos, individualmente, uma vez que eles não possuirão mais nenhuma aparência e você não poderá mais apoiar-se nessas características.
Finalmente, ao não ter mais um padrão de estilo, você será obrigado a analisar detalhadamente a semântica do seu arquivo HTML e escolher o elemento apropriado para uso naquele momento. Exemplo: ao invés de escolher um strong porque o design utilizou um texto em negrito, você escolherá o elemento certo (seja ele um p, um h3 ou qualquer outro) e então estilizará o elemente escolhido conforme necessário.

ℹ

Um importante lembrete é que as regras (geralmente contidas dentro do mesmo arquivo) para resetar seu CSS devem ser a primeira folha de estilos a ser carregada pela sua página web; caso contrário, as coisas podem ficar confusas e existir conflitos na estilização dos seus elementos HTML.

Desvantagens

Apesar dessa seção compartilhar os casos mais comuns - e os benefícios - para resetar seu CSS, todos nós sabemos que toda escolha possui consequências, e nem todas são boas. Como dizia o Tio Ben: “com grandes poderes, vem grandes responsabilidades”, e é por isso que eu gostaria de deixar você ciente sobre alguns “riscos” que a utilização dessa técnica pode trazer:

Provavelmente, todos (ou quase) estilos padrão que vemos nos browsers são úteis e, mesmo que nem sempre sejam “bonitos”, eles irão garantir que nosso conteúdo seja acessível e legível. Ao removermos esses estilos, corremos o risco de que algum conteúdo que esquecemos de customizar fique “quebrado” ou sem estilo.
Tecnicamente, aumentamos o consumo e diminuímos a performance de nossa página web, pois ao abrí-la, o browser terá que aplicar esses estilos imediatamente - e, geralmente, por primeiro -, para só então renderizar os demais estilos (tendo que adaptá-los ao nosso Reset). Disclaimer: muito provavelmente esse ofensor de performance seja imperceptível.
Alguns estilos redefinidos podem ser prejudiciais para usuários que dependem de teclados para navegação.

Exemplos práticos

Teste rápido

Um dos primeiros estilos que são resetados quando adotamos a técnica de Reset CSS usando alguns dos modelos que eu mencionei previamente é o box-sizing. Para entendermos melhor porquê isso é feito, vamos fazer um pequeno e rápido teste.

Digamos que você não tenha nenhum outro estilo em sua página web além do snippet abaixo. Agora quero que analise esses valores e responda: “qual será a largura final dessa div?“.

div {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Você ficaria surpreso se eu disesse que a resposta correta é 142px? 🤯

Explicação

Isso soa tão estranho porque, se eu tivesse que palpitar, diria que +90% das páginas web utilizam o atributo border-box; contudo, por padrão, o valor de box-sizing da web é o content-box. Em resumo, essa propriedade prioriza o conteúdo e, portanto, irá garantir que o conteúdo tenha os 100px que definimos. Dessa forma, o padding: 20px (que será aplicado em todos os lados da div) irá ser adicionado como extra ao elemento. O mesmo vale para as bordas, que incrementarão 1px em cada lado da div. Portanto, o valor final de 142px vem desse cálculo:

100px (do conteúdo) + 40px (20px de padding de cada lado) + 2px (1px de border de cada lado) = 142px

Já ao usar os Reset's mais comuns, geralmente esse valor será redefinido para border-box. Isso irá alterar a forma como o CSS irá calcular as medidas, uma vez que o conteúdo não é mais “priorizado” e passamos a utilizar uma forma mais natural - e, na minha opinião, muito mais simples - de calcular tamanhos, já que o valor passado é “respeitado” e, dessa vez, quem tem de adaptar-se é o próprio conteúdo. Vamos aplicar os mesmos valores do exemplo anterior, mas com o padrão border-box:

100px (do conteúdo) - 40px (20px de padding de cada lado) - 2px (1px de border de cada lado) = 100px

Note que o resultado que estou falando acima (100px) refere-se ao tamanho da div - ou seja, ela “esticou” até preencher exatamente o valor que passamos (width: 100px). Como eu disse anteriormente, nesse caso, quem tem que adaptar-se é o conteúdo e, por isso, no cálculo acima eu usei o sinal de subtração, tendo em vista que o tamanho final do conteúdo precisará acomodar-se no espaço que sobrar depois que o padding e a border forem aplicados.

Como eu sei que esse conteúdo não é simples de ser assimilado, eu deixei o exemplo abaixo para ajudar! 😃 Nele você consegue ver com mais clareza a diferença dos modelos, a largura total da div e a largura do conteúdo destacada com a borda pontilhada em azul. Note, por exemplo, que a borda pontilhada em azul da primeira caixa é exatamente igual ao tamanho total da segunda caixa. Com isso, conseguimos visualizar como o primeiro modelo prioriza o conteúdo (preenchendo o tamanho total com ele, para depois adicionar os cálculos), enquanto o segundo entende que o “total” deve ser o tamanho informado (e diminui os demais valores, encaixando o conteúdo no que sobrar). Convido você a analisar esse exemplo com calma e paciência, pois tenho certeza que isso irá te ajudar!

💡

Lembrete: a borda pontilhada azul é o conteúdo / a borda sólida preta é a largura total da div.

https://codepen.io/manualdofront/pen/yyBmEVr

Caso você deseje aprofundar os conhecimemtno sobre box-sizing, vou deixar aqui o artigo do MDN: lá você encontrará mais exemplos interativos que ajudarão você a entender como essa propriedade altera nossas páginas e pode mudar completamente a forma como escrevemos nossos códigos CSS.

Comparações

Para encerrar esse artigo, ao invés de apenas citar e deixar o link para que você testasse por conta própria, eu decidi dar um empurrãozinho e deixar alguns live-examples de aplicações de diferentes opções de Reset CSS para que você visualize - e surpreenda-se - com as diferenças. Aproveite!

Bônus

E antes de encerrar, gostaria de trazer um outro ponto de vista para que você possa analisar: já que essa é uma técnica um pouco antiga e, como tudo na vida, possui suas desvantagens, será que não faria sentido criar algo mais moderno e que, ao mesmo tempo, resolvesse esses pontos negativos?

Pois isso já existe! E o mais famoso deles é o Normalize CSS (site oficial). E aí: você vai continuar “resetando” seu CSS ou prefere “normalizá-lo”? Qual será que é a diferença? Será que vale fazer um artigo sobre isso? 👀 Me dê sua opinião nos comentários! 👇🏼

Conclusão

Depois de entendermos o que é CSS, falarmos sobre o padrão da web e aprendermos o que é o Reset CSS - juntamente com suas vantagens e desvantagens -, eu acredito que foi possível contextualizar o que é essa técnica tão utilizada nas aplicações web. Eu espero que as seções “Exemplos Práticos” e “Comparações” tenham instigado você a brincar mais com as possibilidades, e dominar ainda mais de assunto. Por fim, você acha que faltou falar sobre alguma coisa? Tem alguma sugestão ou discordância?

Muito obrigado por ler. Continue ligado e inscreva-se na newsletter para receber mais conteúdos como esse! 🔥

Escrito com 💙 e 🎯 por Manual do Front .

Referências:

Primeiros Passos para Estilizar suas Aplicações Web

Table of contents