CSS resets - ress.css

Jul 3, 2016

Para o estilo padrão dos nossos elementos HTML, ter que lidar com a diferente implementação de cada navegador é algo bem complicado.

Ao longo do tempo lidamos com isso de diferentes formas:

A forma mais básica é remover margin e padding:

* {
  margin: 0;
  padding: 0;
}

Uma solução moderna

Hoje em dia, temos algumas soluções que ficaram mais populares. Existe o Normalize.css, o qual não é considerado um reset, pois o que ele faz é:

Garantir que o estilo aplicado pelos diferentes navegadores seja o mesmo.

O que isso quer dizer?

Vejamos esse exemplo do que o Normalize faz para normalizar o h1 no Chrome:

O elemento h1, por padrão no Chrome, tem esse estilo:

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

Porém, quando o h1 está dentro de uma section, article, aside ou nav, esses valores são modificados pelo CSS default do chrome:

:-webkit-any(article, aside, nav, section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
}

O que o normalize faz não é zerar esses valores, e sim garantir que o h1 tenha sempre os mesmos valores independente do contexto:

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Há algum tempo atrás, eu encontrei um projeto de um dos co-autores do Normalize, chamado sanitize:

Render elements consistently. Style with best practices

Ele tem o mesmo objetivo do Normalize: servir como base para o CSS. O sanitize, ao contrário do Normalize, também aplicava alguns resets que eu acho essenciais, como, por exemplo, box-sizing e margin e padding.

Logo comecei a utilizar o sanitize no lugar do Normalize, então, nesse momento, começou a aparecer alguns problemas. O Normalize é muito mais completo quando se trata em concertar bugs entre os navegadores, já o sanitize nem tanto, porem, esse último aplicava um ótimo reset. Então, eu forkei o sanitize e fiz um merge entre os projetos, criando assim o sanilize.css.

sanilize.css

O sanilize.css foi um projeto que eu mantive por um bom tempo. Ele era nada mais que um merge entre o Normalize e o sanitize, removendo propriedades duplicadas e mantendo somente o que fazia sentido.

Eu estava usando o sanilize em todos os projeto e ele se mostrava muito útil, juntando o que tinha de melhor nos dois.

No dia 18 de abril, os planos para a versão 4 do sanitize.css foram anunciados. Eles removeram o reset de margin *e padding, *entre outros, que eu achava muito útil. Já não fazia mais sentido eu manter o sanilize como sendo um merge. Era hora de refatorar :D

ress

O ress surgiu depois que o sanitize 4.0.0 foi lançado. Reescrevi todo o código do sanilize e, então, renomeei o projeto para ress.

ress é um reset CSS moderno.

O objetivo é garantir que coisas bobas, mas importantes do dia-a-dia, não sejam um trabalho necessário em todo novo projeto, assim como definir o resize do text area seja somente vertical ou ficar resetando estilo de botões.

ress features

As features do ress foram retiradas dos problemas que eu encontro mais frequentemente enquanto estou desenvolvendo.

  • Aplica box-sizing: border-box; em todos os elementos.

  • Zera padding e margin em todos os elementos.

  • background-repeat: no-repeat por padrão em todos os elementos.

  • Herda text-decoration e vertical-align para ::before e ::after.

  • Remove outline de todos os elementos no hover (ainda mantido no focus).

  • Aplica font-family: monospace para elementos de código.

  • Zera border-radius em todos os input elements.

  • Herda as propriedades de font nos elementos de formulários.

  • Remove o estilo padrão de botões em todos os navegadores.

  • Aplica resize vertical para textarea.

Além disso, o ress utiliza um subset do normalize para garantir que “bugs reais” sejam corrigidos.

Porque utilizar o ress e não o Normalize?

O resultado dos seus elementos com o ress é um HTML bem crú, todos os elementos precisam ser estilizados.

Com o normalize, você pode simplesmente usar ele e tudo já terá uma cara de “padrão do navegador”, com espaçamento em títulos e botões com um estilo básico.

O código do ress está muito bem documentado. Se você tiver um tempinho livre, vale a pena dar uma olhada. Qualquer dúvida ou sugestão para o projeto, você pode contribuir pelo Github.

home