Navegadores possuem diversas diferenças de padrão em CSS, desde os anos 90. Características visuais de um determinado elemento HTML que não são especificadas na w3c causam com que cada fornecedor escolha uma maneira diferente de representá-lo. Seja uma margem de um elemento canvas, na borda que indica foco no mesmo… A primeira solução criada para isso foi um código chamado de CSS reset no meio dos anos 2000. Aqui teremos uma pequena menção histórica e diferenças conceituais das abordagens. Para as diferenças conceituais, também recomendo esta uma imagem ilustrativa, em inglês.
# CSS Reset
Um reset é uma maneira de remover completamente ou quase completamente todo estilo que já vem por padrão num elemento. Um botão, por exemplo, deixa de ser distinguível de um parágrafo visualmente: a diferença passa a ser apenas semântica. O primeiro reset, escrito em 2004, era bem simples e ainda não tinha essas consequências mais drásticas:
* {
padding: 0;
margin: 0;
}
Outro, também de 2004, se chamava undo HTML (desfazer HTML).
Essa abordagem tem a vantagem de não precisar pensar em como cada elemento vai se comportar em cada navegador. Mas como muita coisa útil é removida, não vem sem seus problemas.
# CSS Normalize
Já o normalize identifica as inconsistências entre fornecedores de browser e cria estilos únicos, tornando a experiência do programador CSS independente dos navegadores usados. Resolve o problema de inconsistência tentando ser o menos destrutivo possível com o que já existe. Por exemplo, no Firefox e no Safari o elemento textarea (e outros) possui uma margem, já no chrome e em outros, não. Um normalize, conceitualmente, não necessariamente removeria a margem dos primeiros para se adequar aos demais, existe um certo nível de decisão “editorial” aí. Curiosamente, não existem vários normalizes, mas apenas o criado em 2012, que é usado pela imensa maioria das pessoas. Para quem ficou curioso, no caso do textarea a margem é removida, como pode ser observado no código.
A principal diferença aqui é que ao invés de remover muita coisa, o normalize mantém boa parte dos estilos padrões dos navegadores, normalizando apenas as inconsistências. Consequentemente, precisa ser atualizado de tempos em tempos para acompanhar eventuais atualizações de navegadores. Já um reset consegue ter ume experiência constante sem a necessidade de atualização.
# Qual usar?
Antes de tirar uma conclusão, é preciso alertar para uma consequência aqui: o reset não é uma alternativa acessível por padrão. Ao remover tudo que é estilo, a programadora precisa necessariamente criar novos estilos para diversos elementos. Por exemplo, o CSS reset remove a propriedade outline que indica foco num elemento HTML. Um efeito colateral disso é dificultar, se não impedir, que usuários que não usam mouse acessem o seu site. Muitas pessoas não usam mouse. Dentre elas, pessoas com baixa visão ou alguma dificuldade de mobilidade.
Isso não quer dizer que o CSS reset está cancelado, mas que a pessoa precisa trabalhar em cima disso re-escrevendo estilos para cada caso necessário: seja re-criar o estilo de botões, seja este e muitos outros casos de acessibilidade. Quando uma framework CSS for escrita, talvez um reset seja necessário, pois a ideia de uma framework é criar uma nova base de trabalho. Ou, como no caso do bootstrap, criar um reset um pouco diferente e chamar de “reboot”.
Talvez existam outros casos de uso que eu não previ, mas na dúvida, use o normalize que fica tudo certo :)