AD – Anywhere design

Trabalhar com CSS pode parecer uma batalha constante. Navegadores estão mudando sempre a forma como eles lêem o código (*tosse* Internet Explorer *tosse*), e parece que há um monte de pequenas “dicas”. Embora seja uma linguagem extremamente poderosa, ele pode ser facilmente utilizado de maneira incorreta. O seu castigo será um desenvolvimento com tempo de vida de imperfeições.

1. Ignorando a compatibilidade entre navegadores

Este é provavelmente o problema número 1 com desenvolvimento web. Já que você tem que ter layouts que têm a mesma aparência, não importa qual browser os seus visitantes utilizam para visualizar a página. Este fato pode, por vezes, parece ser a causa mortal de sua existência: há diferenças fundamentais na forma como o Internet Explorer visualiza uma página versus Firefox. Embora não seja tão má como se costumava ser, há ainda muita diferença entre os navegadores.
É fácil para desenvolvedores de web desenvolver um layout no seu navegador favorito e sem se preocupar com a aparência que terá em outros grandes navegadores, como muito provavelmente você não verá as diferenças.(Eu sou um grande agressor do presente. Às vezes eu vou fazer o layout do site no Firefox e esqueço de checar no IE antes de terminar!) Embora existam alguns métodos comprovados e verdadeiros para ajudar a salvaguardar o seu browser para diferentes renderizações de layouts, a melhor forma de garantir que tudo está em perfeitas condições é só usar o Browsershots. Browsershots dá uma imagem exata do que se parece com o seu site em vários browsers e em plataformas diferentes, permitindo a você ter certeza que nada parece errado em um navegador.

2. Não se importar com pequenas resoluções

Embora um bom número de nós desenvolvedores web têm grandes monitores em seus computadores – e são muito orgulhosos com isso – uma boa parte dos visitantes do seu site talvez não. Você pode verificar isso em programas de análise (o Google Analytics faz isso maravilhosamente bem) para ver qual a resolução dos seus visitantes. No entanto, existe um mundo de diferença na forma de um projeto aparece numa resolução 1024×768, por oposição a uma resolução 800×600. Você pode fazer um lindo design, porém inútil.
Contabilidade para pequenos navegadores, significa que todos os seus visitantes estão felizes ao encontrar um design perfeito e a informação de que necessitam.

3. Não considerar frameworks

Se você está desenvolvendo um layout CSS a partir do zero, você pode querer perguntar-se porquê. Assim como não há nada novo sob o sol, o mesmo acontece com o CSS. São muitos os quadros CSS lá fora, como Blueprint quadro e os 960 CSS Framework. Estes são criados para ajudar você a criar layouts à prova de bala, sem ter de começar algo do zero. Estes esquemas têm cruz-browser compatibilidade e foram rigorosamente testadas. Realmente, a menos que você esteja fazendo algo que precisa ser totalmente radical pantloads de código personalizado, basta usar um quadro CSS.
Por quê reinventar a roda?

4. Não utilizando classes genéricas

Ele pode ser bastante fácil não pensar no futuro quando estamos desenvolvendo sites. Muitas vezes nós o nomeamos nossas CSS Classes com algo diferente cada vez que desenvolvemos um site, por oposição a fazer uma simples classe CSS que podemos reutilizar repetidamente ao longo do nosso projeto, sem ter que desenterrar o que usou antes. Isto irá assegurar que o nosso site premanecerá constant durante todas as páginas.

Você pode usar uma classe generica como:
(ps: o duplo ‘right’ é resultado de um bug no visualizador do nosso código. O código correto é .right {float:right}, claro.)

Para fazer as coisas floating à direita quando vc quiser, basta colocar uma ID como:

Eu uso geralmente pelo menos 3 classes genericas quando estou construindo um site:

5. Não validar o HTML

Aposto que você não sabia que a validação de seu HTML poderá também afetar o seu CSS, não é? Bem, ela pode. Primeiro e acima de tudo, você não pode validar o seu CSS até ter HTML válido. Em segundo lugar, há muitos casos que poderiam ser o HTML que está causando os seus problemas e não o código CSS. Muitas vezes pensamos que o nosso CSS altera o layout quando na verdade é um pouco de HTML malformados que ferra nosso layout. Uma DIV aberta aqui, outra class errada ali… ele poderia ser qualquer coisa. Verifique se o seu HTML está validado antes de você tentar diagnosticar um problema CSS.

6. Não validar o CSS

Eu costumava incomodar constantemente um amigo quando tinha problemas com o CSS. E ele sempre, pacientemente, sempre me perguntava: “Você validou o CSS? Se não, Qual é o erro?”. Não demorou mto pra eu aprender a validar o CSS antes de pedir ajuda.
Se você tiver validado o código CSS, as probabilidades de se ter um CSS compatível com todos os browsers é muito maior.

7. Usar imagens grandes como background

Muitas vezes, novos designers usam imagens superdimencionadas em seus layouts. Por exemplo, uma imagem de 3000px X 5000px para não ter problemas com eventuais resoluções. Em vez de usar uma imagem muito grande, eles poderiam usar uma imagem pequena e repetí-la através do CSS como num passe de mágicas!
A diferença é enorme: em vez de carregar uma imagem de 200kb, você carregará apenas uma imagem de alguns bytes.

Se você tiver uma imagem de fundo muito grande, você estará perdendo de 2 maneiras?

1. Uso desnecessário de banda;
2. O usuário esperará mto mais tempo para carregar a imagem de fundo.

Às vezes, grandes imagens são inevitáveis, especialmente com a recente tendência de desenhar esquemas ilustrativos na web. No entanto, repetir imagens ou cores sólidas no fundo é a melhor opção.

8. Usar CSS para tudo

Quanto as pessoas aprendem sobre uma tecnologica, elas ficam mto excitadas sobre isso e querem usar isso para tudo, mesmo quando essa opção não é a melhor para o seu projeto.
Por exemplo, mtas vezes é muito mais fácil usar tabelas para organizar o conteúdo do que criar um layout baseado em CSS com floatings e DIV’s. Nós temos que nos lembrar a ração do porque usar essas tecnologicas, como o CSS é porque ela deve acelerar o desenvolvimento. Quanto isso começa a nos atrasar, talvez estejamos indo pelo caminho errado.

9. Usar CSS inline (no HTML)

Este é o pecado original de desenvolvedores web, e isso acontece mais do que você gostaria de saber. Se você está construindo um projeto, quase sempre irá optar por manter o seu CSS e HTML separados. Isso garante que quando (aviso prévio, eu não disse “se”), você decidir mudar o design do site, você não terá que cavar através do HTML de cada layout e encontrar os malditos CSS anexado a um elemento inline.

Ao invés de usar este:

Você deve mover o estilo para uma folha de estilo externa como este:

CSS inline quase sempre deve ser evitado. É fácil de usar e ótimo para testes, mas que provavelmente você não irá querer isso em seus códigos.

10. Utilizar muitos arquivos

Você já viu um layout com 12 CSSs diferentes anexados a ela? É um pesadelo para qualquer pessoa tentar fazer alterações em seu layout. Não só isso, diminui o tempo de processamento de cada ficheiro, como o navegador tem de fazer um pedido por cada um. É melhor usar um esquema simples que usa 1 ou 2 ficheiros de CSS. O tempo de analisar 12 processos contra um único arquivo é bastante significativo. Não só isso, você economizará o próximo fulaninho que terá que fazer as mudanças em seu layout com um monte de problemas.
Ninguém quer abrir 12 arquivos para fazer um simples, site-wide mudar!

Artigo traduzido e adaptado para o portugues (http://nettuts.com/articles)