4 dicas para corrigir problemas no seu CSS mais facilmente

Tudo vai bem no seu dia, você chegou no horário, entregou aquele projeto no prazo, respondeu todos os seus emails e já está pronto pra começar uma nova tarefa quando alguém diz “Oi. Estamos com um problema na página tal: uma das colunas está desalinhada e quebrou o layout. Você pode resolver isso? É urgente.”.

Aí começa o tormento. Aquilo que parecia algo simples de ser solucionado acaba levando horas e destrói o seu bom humor. Se você trabalha numa empresa que usa algum tipo de CMS [Content Manager System], como o Vignette por exemplo, a coisa pode ser ainda pior, pois nesses casos, muitas vezes, você não tem controle sobre o CSS principal, usado em todas as seções do site, então é preciso resolver com um css separado que possa ser incluído na área ‘editável’.

Para tornar essa tarefa um pouco mais fácil (e menos penosa) seguem aqui algumas dicas que podem fazer toda a diferença, transformando aquelas 2 horas que muitas vezes levamos apenas pra descobrir qual o problema em uma correção muito mais simples e rápida.

1 - Instale o Firebug e a IE Developer Toolbar

Eu sei. Você tem preguiça de adicionar mais uma extensão ao seu já abarrotado Firefox e gosta ainda menos da idéia de instalar uma toolbar no Internet Explorer. Eu também. Mas acredite, se você trabalha desenvolvendo CSS e HTM, você precisa delas, e é de se espantar que ainda não as tenha.
Por quê? O que elas têm de tão interessante!? Simples e genial: com elas você pode “inspecionar” cada um dos elementos HTML da página: basta clicar em qualquer div, parágrafo ou lista e todas as suas propriedades serão exibidas (width, height, float, etc..). E o melhor, é possível editar cada uma das propriedades no próprio navegador e ver o efeito imediatamente. Assim fica muito mais fácil testar várias alterações no código até chegar na melhor solução. O que está esperando, instale agora! Seguem os links:
IE Developer Toolbar | Firebug

2 - Mantenha as correções num bloco separado

A menos que a correção seja muito simples ou que se tenha muita sorte, geralmente não acertamos na primeira. Sempre é preciso um ou outro pequeno ajuste, alterando o valor da margem ou adicionando um pixel na largura, etc.. Também é comum que se precise mexer em mais de um elemento para chegar à um resultado ideal. Por isso, enquanto estiver corrigindo, mantenha suas alterações num bloco separado, de preferência ao final do CSS. Assim será muito mais fácil testar outras opções e aprimorar o código.

3 - Use !important

Muitas vezes não temos controle sobre todos os CSS’s carregados pela página (no caso de algums CMS’s por ex). Isso somado ao fato de que quanto mais específico o seletor maior a sua importância pode causar alguns problemas. Por exemplo:
/*A linha:*/
body div#topo h1 a { color:red; }
/*tem maior importância que a linha:*/
#topo a { color: black; }
Ou seja, mesmo que a linha alterando a cor para “black” venha depois da “red”, ela não terá nenhum efeito, pois a primeira é mais específica, com o caminho hierárquico completo do elemento (nesse caso o “a”). E às vezes quando se está corrigindo o CSS, alteramos alguma propriedade para solucionar um problema e isso não surte nenhum efeito, e gastamos muito tempo tentando entender por que não está dando certo ou buscando outra alternativa quando na verdade o que foi feito está correto, só não está funcionando por que existe algum seletor hierarquicamente mais importante setando a mesma propriedade.

Por isso, quando estiver corrigindo uma style sheet e acontecer algo desse tipo experimente usar “!important” à frente do valor da propriedade. Isso fará com que ela se torne mais importante do que qualquer outra linha que possa existir e que esteja setando a mesma propriedade, mesmo que venha depois dela.  Por exemplo:
body div#topo h1 a { color:red; }
#topo a { color: black !important; }
body div#topo h1 a { color:green; }
No exemplo acima o elemento “a” ficará com sua cor preta mesmo tendo linhas com seletores mais específicos o configurando para vermelho e outra configurando para verde. Isso por que usei o !important.

4 - Monte uma boa plataforma de testes

Nada mais improdutivo do que a necessidade de, a cada pequena alteração de código, ter que publicar vários arquivos ou ter que pedir pra alguém “dar uma olhada no ie6″ para saber se a correção teve sucesso. O que deveria levar alguns segundos, o tempo de um Ctrl+S e um F5, demora 5, 10 minutos dependendo da publicação ou da disponibilidade do seu “beta-tester”. Se forem necessárias cinco ou seis mexidas até encontrar o melhor resultado lá se foi um hora.

Então:

- gaste algum tempo instalando todos os browsers relevantes para a sua audiência. Caso tenha algum problema com versões diferentes do IE experiemente o Multiple IE. Para outros browsers uma boa opção é o BrowserShots.

- se o seu site roda em um ambiente dinâmico [php, asp, etc] leve em consideração a instalação de um servidor local na sua máquina. Apache e Personal Web Server são opções simples e não consomem tanta memória. Com eles você poderá simular o ambiente online e fazer correções mais rapidamente e sem riscos.

- mantenha as pastas publicadas sincronizadas com sua cópia offline, isso favorece a simulação do ambiente online e proporciona um melhor diagnóstico dos problemas.