A prática do CSS Reset

Artigo criado por Cadu Carvalho    4 Comentários Tweet

Aviso: tentarei não insultar o Internet Explorer até o fim deste post; tenho sido razoavelmente feliz com a versão 9.

Para começarmos a falar deste assunto, temos que postular, a partir de agora, a premissa básica de que nenhum browser é perfeito.

Atualmente, aliás, os critérios envolvidos na escolha de um navegador são bem menos tangíveis do que outrora: foi-se o tempo em que “o Firefox era melhor porque tinha abas”, “o Opera consegue passar no Acid2 e Acid3”, “o Safari tem o melhor inspetor de elementos”, etc. Isso, inclusive, faz deles menos “importantes” do que já foram.

Não é exatamente disso que eu quero falar, mas é deste jeito que eu queria introduzir (rá!) o assunto.

Quando você, nobre leitor que usou a hashtag #soudev no Twitter pelo menos uma vez na vida, dispor de um tempinho livre, crie um documento HTML sem nenhum estilo definido e com várias tags distintas — incluindo as que você talvez nunca tenha usado, como address, blockquote, o trio dl dt e dd, fieldset, entre outras (estude-as, mas não gaste seu tempo com tags obsoletas e/ou dedicadas a simples formatação) — e compare-o em vários navegadores: você verá que existem pequenas diferenças no resultado final em cada tela.

Sim, são detalhes pequenos: uma margem a mais ou a menos, um espaçamento mais ou menos generoso, mas nada que fuja muito daquela belezura de texto em Times New Roman 12 preto com fundo branco e links sublinhados em azul. Cada navegador traz consigo uma folha de estilos própria — muito parecida entre todos os browsers —, as chamadas declarações de user agent, que são invocadas quando não há nenhuma folha de estilos definida pelo autor do site.
Para renderizar uma página, um navegador analisa todas as declarações, e elas tornam-se ativas ou não de acordo com seu nível hierárquico. A ordem analisada é a seguinte (do menor para o maior):

1. Declarações de user agent (nativas do browser);
2. Declarações comuns de usuário (opções de visualização que o browser oferece ao usuário);
3. Declarações comuns do autor (são as que você, querido #soudev, cria e especifica no cabeçalho do site);
4. Declarações importantes do autor (são as que você, querido #soudev, cria e resolve problemas de herança utilizando o !important);
5. Declarações importantes do usuário (opções de visualização do browser e transformações em tempo real causadas por um inspetor de elemento, por exemplo);

Contudo, quando criamos nosso site, é muito grande a chance de não especificarmos todas as propriedades de um elemento, e que, com isso, ele preencha as propriedades não declaradas com especificações de user agent.

Hora de lembrar a premissa básica do primeiro parágrafo: nenhum browser é perfeito, e o CSS de cada browser tem diferenças sutis — tão sutis — que dão origem a surtos psicóticos de raiva quando você quer descobrir a origem de uma falha no seu layout em um navegador específico.

A fim de resolver isso e melhorar significamente a vida do desenvolvedor, existe a prática conhecida como CSS Reset. A grosso modo, significa zerar todos os atributos de todas as tags e deixá-las livres para você fazer o que quiser desde o início. Lembrando daquela lista hierárquica: o Reset do CSS viria nas declarações do autor do site, antes das fohas de estilos que estruturam o site, e sobrepõe toda a declaração de user agent com atributos zerados.

Existem diversas ferramentas para fazer o CSS Reset; uma das mais simples é fornecida pelo Yahoo!, em sua área de desenvolvedores, em que o autor do site adiciona o link para o CSS Reset remoto (<link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css”>) antes de todas as outras folhas de estilo, zerando todo o CSS nativo e fazendo do seu site um sandbox para você definir o estilo de cada tag do seu jeito.

Outra, mais comum — porém, menos recomendável — é adicionar na primeira linha da sua folha de estilos: * { margin: 0; padding: 0; }. Sim, isso zera tudo; absolutamente tudo, até o que você não precisará usar, o que consome mais recursos do navegador para pouco uso efetivo.

Quais os benefícios da prática do CSS Reset?

Os benefícios do CSS Reset são vários, e bem convincentes.

Quando você redefine (“reseta”, ou também “zera”) a folha de estilos nativa do navegador, você faz isso com todos os navegadores, e a sua folha de estilos tem uma chance muito maior de ser compatível com todos eles (descartando, claro, bugs de renderização do você-sabe-quem-6.0).

Ter essas arestas devidamente aparadas é o Nintendo-Sixty-FOOOOOUR dos desenvolvedores de interfaces para web.

Vários frameworks de CSS, como o YAML e o 960.gs (falarei dele posteriormente), trazem consigo seus próprios CSS Reset’s, facilitando ainda mais o trabalho do criador do layout (não quero discutir agora se frameworks são ou não melhores do que criar do zero).

Existem malefícios?

Os malefícios — sim, existem malefícios — são notáveis principalmente por quem depende de ferramentas de administração exibidas junto com a página. Elas têm seu CSS próprio que, sendo sobreposto por algum CSS Reset, torna-se inutilizável. Isso pode ser resolvido criando o site inteiro dentro de uma div e zerando tudo dentro dela, mas por causa de herança de atributos, pode haver a necessidade de resolver muitas inconsistências por meio do !important — o que não representa problema algum para o séquito da POG, if you know what I mean.

Outro malefício existente: a folha de estilos do user agent define visualmente bem o tipo de conteúdo (a.k.a. tag utilizada) descrito no HTML: uma informação mais específica recebe estilo itálico; títulos recebem negrito; listas recebem espaçamentos próprios. Quando o CSS Reset é aplicado de maneira excessivamente generalista, tudo isso é, a princípio, perdido, e o desenvolvedor precisa especificar tudo de novo, do jeito que quiser.

Conclusão…

Concluindo essa pequena prosa (sim, a intenção era ser bem menos técnico e mais dissertativo, mas isso não será imperativo aos próximos posts sobre este assunto), uma prática interessante é redefinir somente as tags que serão realmente utilizadas, o que economiza tempo, conexão, e permite maior controle sobre as alterações efetivamente realizadas.

Nem tudo que vem no user agent precisa ser descartado, como negritos, itálicos, tamanho de corpo de texto, mas ter a devida liberdade de criar também é importante. Todos os browsers modernos alcançaram um nível decente de respeito aos padrões de CSS, incluindo você-sabe-quem, e daqui a algum tempo serão realmente poucos os que precisarão quebrar a cabeça com os bugs de você-sabe-quem-versões-passadas.

Gostou do artigo? Comente! Veja também outros artigos do Cadu Carvalho no Algoritmizando!