7 dicas importantes de layout CSS

A coisa mais difícil de acertar em CSS é o layout do seu site. Aqui estão algumas dicas para lidar exatamente com isso. Algumas dessas dicas não são exatamente novas, ou ciência de foguetes, mas espero que elas poupem alguém em algum lugar!

Dica 1: limpe as configurações padrão de preenchimento e margem antes de começar a trabalhar.
Navegadores diferentes têm margens e tamanhos de preenchimento padrão diferentes, então você deseja começar do zero, por assim dizer. Use este comando:

*
{
margem: 0;
preenchimento: 0;
borda: 0;
}

para limpar todas as configurações padrão de margem e preenchimento. Observe também a borda, que está definida como 0. Observe que, se você fizer isso, também se livrará da incômoda borda roxa ao redor das imagens clicáveis, embora algumas pessoas argumentem que a borda roxa é necessária para acessibilidade e usabilidade. Mas muitas pessoas não gostam da borda roxa nas imagens, e esta é uma maneira de se livrar dela de uma só vez, sem ter que definir borda img = 0 para cada imagem (o que é contra as regras estritas de marcação em qualquer caso).

Dica 2: para centralizar seu layout, use um container div para conter todo o seu conteúdo
Declare-o da seguinte forma:

#recipiente

{
margem: 0 automático;
largura: xxxpx;
}

Há alguns pontos aqui a serem observados. NÃO declare a largura como 100%. Isso anula todo o objeto, pois você apenas terá que declarar os subelementos dentro do contêiner e centralizá-los usando margem: 0 automático. Isso é MUITO RUIM, pois significa que em vez de declarar o layout central uma vez, você terá que declará-lo em vários lugares para cada elemento do seu contêiner.

Dica 3: Trabalhe de cima para baixo
Comece literalmente a trabalhar em seu layout CSS começando pelos elementos principais do seu design, bem como pelos elementos “principais” do seu HTML, como o corpo, bem como seus contêineres principais.

Declare seus comandos CSS no nível mais alto possível e tente declarar algo apenas uma vez e deixe-o em cascata. Substitua os comandos de nível inferior apenas quando for estritamente necessário. Isso evita um arquivo CSS detalhado que é difícil de manter e entender. Por exemplo, se você tiver {margem: 0 automático} configurações em cada subdiv dentro do seu contêiner – você está com problemas.

Dica 4: documente o que você está fazendo e use o Firebug e o navegador Firefox para depurar
Você não está escrevendo seu código CSS apenas para você, algum dia algum pobre coitado terá que depurá-lo. Faça vários comentários dentro do seu arquivo CSS para explicar por que você está fazendo as coisas de uma maneira específica.

Combinando com isso, você pode ter que consertar o CSS de outra pessoa com mais frequência do que pensa (ou mesmo o seu próprio, nesse caso). Use o complemento Firebug para Firefox para depurar seu CSS. Isso salva vidas no que diz respeito a fornecer uma visão exata de onde seu projeto pode estar quebrado e por quê.

O único problema com isso é que seu design pode funcionar perfeitamente no Firefox, mas não no IE5, IE6 ou IE7. Isso nos leva à próxima dica.

Dica 5: Decida para quais navegadores você vai construir seu CSS e teste desde o início
Alguns puristas insistem em garantir que seu site funcione para todos os navegadores possíveis, outros apenas o fazem funcionar para os navegadores “principais”. Como saber exatamente quais navegadores são mais usados? Mais uma vez as Escolas W3 vêm em socorro.

Na página seguinte, você pode ver quais navegadores são os mais populares: http://www.w3schools.com/browsers/browsers_stats.asp. Nesta página você pode ver que algo como o IE5 é usado apenas por cerca de 1.1% dos navegadores. Cabe a você decidir se considera valer a pena construir seu CSS para ser compatível com este navegador, ou se vai apenas testar sua compatibilidade com IE6, IE7 e Firefox, por exemplo. Faça o que fizer, quando começar a construir seu CSS, comece do início e teste cada uma das configurações em cada um dos navegadores à medida que avança. Não há nada pior do que construir um site perfeito no Firefox e descobrir logo após codificar um arquivo CSS de 1000 linhas que ele está quebrado no IE6. Depurar e corrigir seu código após o fato é um pesadelo.

Dica 6: Aqui está uma dica embaraçosa para consertar seu CSS no IE6 ou IE7
Digamos que seu design funcione perfeitamente no Firefox, mas esteja quebrado no IE6. Você não pode usar o Firebug para determinar onde pode estar o problema, pois FUNCIONA no Firefox. Você não pode se dar ao luxo de usar o Firebug no IE6, então como depurar uma folha de estilo do IE6 ou IE7? Muitas vezes descobri que ajuda adicionar {borda: 1 px vermelho sólido} or {borda: 1 px roxo sólido} aos elementos problemáticos. Desta forma, muitas vezes você pode ver porque certos elementos não cabem no espaço disponível. É uma dica constrangedora por ser tão primitiva e simples, mas funciona!

Dica 7: Entenda os carros alegóricos
A flutuação de elementos é essencial para entender, especialmente no contexto de fazer com que seus elementos flutuantes funcionem em diferentes navegadores!

Basicamente, elementos como divs flutuam para a esquerda ou para a direita (nunca para cima ou para baixo, apenas para os lados). Aqui estão algumas coisas a serem levadas em consideração com elementos flutuantes. Cada elemento flutuante deve ter uma largura explícita especificada. Se você estiver usando divs flutuantes para criar um layout de 3 ou 2 colunas, especifique as larguras em termos de porcentagens em vez de larguras fixas e, se usar porcentagens, certifique-se de que as porcentagens não somam 100 %, isso geralmente fará com que a coluna mais à direita fique abaixo das demais, indicando claramente que você está tentando encaixar algo no espaço disponível que é muito largo para isso. Em vez disso, use porcentagens que somam um pouco abaixo de 100%, como 25%, 49%, 24% para uma coluna da esquerda, coluna do meio e coluna da direita.

Elementos flutuantes podem ser extremamente complexos de entender e vale a pena gastar algum tempo em bons sites que fornecem orientações e dicas específicas, como o Posição é tudo .

Conclusão
Esperançosamente, essas dicas de CSS para layout devem economizar algum tempo e esforço na próxima vez que você precisar enviar um design sem tabela para o painel! Este foi um post convidado escrito por Christine Anderssen.