Reset css vs normalize css
Arquitetura css — Part.1
Quando falamos de arquitetura CSS podemos abordar vários assuntos e boas práticas para melhorar a estrutura do nosso CSS. Dessa forma, vamos iniciar falando sobre arquivos que foram criados para nos ajudar em determinadas estilizações, os famosos reset css e normalize css. Porém, muitas vezes se confundem o significados e como usa-los, por mais parecidos que sejam, eles possuem usos diferentes e veremos como fazer isso hoje!
Contextualizando
Sempre que fazemos um projeto, logicamente ele fica disponível em qualquer browser, por mais que a renderização é feita de forma igual a todos, pois é o processo normal da web, alguns elementos ao renderizar podem ter diferentes comportamentos de um browser para o outro. Por exemplo, o Chrome trabalha de um jeito, o Firefox de outro e o Microsoft EDGE de outro e essa diferença é fruto de um padrão chamado User Agent Style Sheets, que todos browsers possuem.
User Agent Style Sheets
Quando os browsers renderizam o nosso HTML, é aplicado estilos CSS padrões em nossa página através dos User Agent Style Sheets. Se você já inspecionou seu projeto, para ver erros ou testar CSS, com certeza já viu esse conceito, ele se parece com algo assim:
Todos os browsers possuem esse conceito, alguns exemplos são:
Esses são só alguns exemplos, existe uma lista imensa de links relacionados aos User Agent Style Sheets, tentei trazer os mais recentes para vocês.
Mas nem sempre vamos querer usar esses CSS padrões, por vezes não serão necessário no nosso contexto e pode acabar atrapalhando, por isso existem os conceitos de reset css e normalize css, que nada mais são do que arquivos que ajudam na modificação desses arquivos (ou de uma forma mais extrema, na remoção deles).
Como já foi dito, apesar de semelhantes eles possuem suas diferenças e devemos saber usa-los e quando usa-los.
Normalize CSS
Seguinte esse raciocínio de que os browsers possuem diferentes comportamentos, se olharmos para os padrões aplicados pela W3C podemos ver claramente diferenças e que vão afetar na atuação da nossa página. Portanto, o que o normalize css vai faz é basicamente concertar isso e construir um padrão para todos os browsers.
Algumas diferenças podem ser mínimas igual o exemplo acima ou pode ser muito grande.
O normalize CSS é um arquivo bem simples que ajuda na padronização de elementos na sua página entre os browsers, ou seja, as diferenças que dariam por padrão são corrigidas por esse arquivo.
Exemplo:
/** * Remove the margin in all browsers. */
body { margin: 0;}Assim ele removerá as margins de todos os browsers.
O normalize css é um projeto open source criado pelo Nicolas Gallagher e você pode conferir mais no repositório do github dele:
Reset CSS
O reset css é um pouco parecido com o normalize, mas podemos dizer que ele é um pouco mais “agressivo”, porque o que ele vai fazer é excluir todos os padrões dos browsers e nem sempre isso será bom.
O problema na verdade é que ele afeta coisas desnecessárias em alguns contextos. Por vezes é mais eficaz nós mesmo criarmos nosso próprio arquivo reset css, colocando nossas especificações.
Exemplo:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}Nesse caso ele removeria o display: block de todas essas tags.
O reset css é uma ferramenta criado por Eric Meyer’s e você pode ver mais sobre ela no blog dele.
Como trabalhar com eles juntos?
Apesar das diferenças, é muito comum trabalhar com os dois arquivos. Assim, podemos tirar todos benefícios do normalize css, mas para o reset css podemos escrever um específico para o nosso contexto.
O Desenvolvedor e expert em HTML e CSS Elad Schechter também escreveu um artigo falando sobre as diferenças do normalize css e reset css, nele ele destaca a importância de criarmos nosso próprio reset css, como o exemplo abaixo criado por ele:
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{box-sizing:border-box;}a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}Assim, não deixamos ele alterar de forma agressiva nosso projeto.
Resumo
Nesse artigo mostrei para você as diferenças e benefícios do normalize css e reset css, quando usar e como usa-los e quando trabalhar com eles juntos.
Espero ter ajudado você!
Você pode me encontrar em:
Agradecimento
Obrigada por seguir meus artigos! Qualquer sugestão e feedbacks são sempre bem vindos ;)
