Parece inútil, mas se parar pra pensar. Em sites mobiles ou pra tablets, isso funciona praticamente em 100% dos acessos.

Veja o efeito, com o mínimo de código possível:

Pra quem se interessou, pode fazer download do exemplo aqui.

Assim como existem diversas linguagens de servidor pra no final geral HTML (como PHP / JAVA / Ruby / ASP, etc), é completamente normal que comecem a aparecer linguagens pra gerar css e javascript.

E SASS gera CSS, Coffee Script gera Javascript… e por aí vai.

E quais são as vantagens de usar SASS:

É possível dar includes, criar funções, variáveis, expressões matemáticas. E como a linguagem é interpretada, erradifica qualquer tipo de bug / erro de digitação do CSS.

Veja alguns prints de um arquivo sass / scss.

Funções (Mixins) com Sass

Expresões matemáticas com Sass

Variáveis, includes e mixins com Sass

O que precisa pra trabalhar com SASS?

Primeiro, precisa baixar e instalar Ruby.

Pra quem não tem, baixe aqui e depois configure a entrada do Ruby nas suas variáveis de ambientes.
É meio chatinho isso pra quem usa windows, precisa clicar do direito no “Meu Computador” e ir em propriedades, depois são 6 passos:

1. > Advanced System Settings
2. > Advanced
3. > Environment Variables
4. > Na caixa System variables clicar em Path
5. > Clicar em Edit e vai abir uma nova janela com a entrada.
6. > Agora é só adicionar e dar ok. Precisa adicionar a pasta “bin” do Ruby, provavelmente vai ser C:\Ruby192\bin; (não esqueça do ; )

Pronto, Ruby instalado, aí precisa baixar a gem do sass:

entre no DOS ( windows + R e digite cmd ) entre na pasta do Ruby e digite

gem install sass

Vai demorar uma carinha pra baixar / instalar.

Mas é isso.

Depois, no seu projeto, crie uma pasta sass e uma css na raiz.

E ainda no DOS entre no projeto e execute o comando

sass --watch sass:css

Isso fará com quem cada vez que ouver alguma alteração na pasta sass, republique o css

Existe várias formas de gerar o css como compactado, compresso, normal, eu gosto de executar assim:

sass --watch sass:css --style compact --no-cache

Pra quem quiser, deixei uma pasta pronta com um base project de sass com reset, alguns mixins (como são chamadas as funções em sass) e com um .bat que inicia sozinho o watch pra escrever o css em tempo real.

Apesar de não termos um blogroll, esse seria o nosso. Segue lista em ordem alfabética, façam bom proveito:

A informação – Atualizado com boa freqüência, o blog fala sobre o mercado de TI em geral, mostrando as principais notícias do momento da área.

Akita On Rails Fabio Akita, uma das principais referências de Ruby On Rails no Brasil, ensina RoR, divulga eventos e mostra as principais novidades do framework.

AleMazzariolli – A webwriter, que também é editora do webinsider, e revisora dos cursos online da Visie fala sobre suas experiências profissionais: comunicação, usabilidade, acessibilidade, etc.

Arquitetura de Informação – O famoso blog é atualizado Silvia Melo e Fabricio Teixeira (arquitetos de informação da AgênciaClick) mostra boas referências, ótimos textos e os trabalhos realizados por eles.

BrPoint – O Blog fala sobre SEO e Blogs, incentivando a galera a fazer blogs pra ganhar dinheiro, ou mesmo por diversão.

Bruno Dulcetti – Com boa freqüência de posts também, o carioca que trabalha como Web Design / Web Development fala sobre web standards, css, xhtml e tecnologia em geral.

Bruno Torres – O carioca, especialista em SEO, trabalha no UOL, apesar de não postar muito, seu Blog conta com 5290 assinantes em seu FeedBurner.

Carreirasolo – Um blog diferente, conta como é viver de freela, e da as dicas pra galera a conseguir isso. Também posta sempre sobre profissionais freelancers (para aqueles que querem contratar), divulga jobs e vagas para freelancers e ainda tem um podcast falando das dificuldades em freelas.

Ciro Feitosa – Desenvolvedor web, trabalha tanto em desenvolvimento de sistemas quanto em programador de interface, e no seu blog, fala sobre suas experiências.

Chris B. – Com uma experiência grande já na área de desenvolvimento web, Chris é responsável por uma equipe de programadores de interface e conta no seu blog um pouco de suas experiências.

Clauber Stipkovic – Programador de interface da AgênciaClick e membro do projeto Mozilla. Clauber, também conhecido como Jesus (semelhança física), comenta seus projetos em seu blog.

Cleiver – O programador fala bastante sobre php, o framework CakePHP, linux e seu notebook da HP que só lhe dá problemas.

Cor Cinza – Apesar do nome parecer um blog de design, o conteúdo principal do blog é PHP, o blog tem boas introduções e tutoriais pra quem está começando na linguagem.

CSS no lanche – Blog específico, fala do básico ao avançado sobre CSS, explica boas práticas, e é sempre atualizado.

Danillo Nunes – Recentemente ele decidiu traduzir o Opera Web Standards Curriculum, um curso da Opera que ajuda a preparar desenvolvedores. Os artigos são excelentes, bem técnicos.

Desenvolvimento para Web – Sem um tema específico, o blog da dicas de SEO, PHP, CSS e fala sobre novos CMS e tudo mais que engloba o desenvolvimento web.

DGMike – DGmike é desenvolvedor web que trabalha para a Visie. Seu blog fala sobre php, python, html, css, javascript, etc.

Digital Paper (Podcast) – Em formato de Podcast, o blog com poucas atualizações, tem pots interessantes sobre usabilidade, wordpress, Google Gears, etc…

Eduardo Ottaviani – Mais um programador de interface da AgênciaClick, fala sobre CSS, Javascript e boas práticas no desenvolvimento.

El Micox – O blog bastante visitado (eu acho) tem como objetivo postar funções prontas JavaScript, Ajax, PHP, DOM, Webstandards, dicas e outras coisas.

FechaTag – Outro blog de alguém da Visie, Elcio Ferreira fala sobre XML, XHTML, CSS, Tableless, Python, Linux além de divulgar eventos da área.

HTMHelen – Helen Fernanda tem um perfil interessante, apesar trabalhar em outra área e estudar comunicação, ela escreve sobre html, css e novidades na internet. O blog está sempre atualizado e além desse blog, ela tem mais QUATRO, e ainda faz freelas com web. Helen parece ser uma daquelas pessoas que faz seu dia parecer ter 35 horas.

Igor Escobar – Como ele mesmo diz, o objetivo do blog é documentar todo o processo de mudança na área de técnolgia focada no desenvolvimento web e apresentar as soluções e problemas cotidianos.

Ivo Gomes – Ivo, consultor de usablidade a 4 anos, fala um pouco da área, de acessibilidade e arquitetura da informação.

jQuery Brasil – Sem posts recentes mas com um conteúdo muito bom, jQuery Brasil fala sobre plugins, efeitos e como usar o mais conhecido framework em javascript.

Julio Gref – O desenvolvedor web fala sobre Frameworks, Mootols, jQuery, Javascript, e como diz um de seus posts: “coisas que todo desenvolvedor deveria saber”.

Leonardo Caineli – Com mais de 7 anos de experiência na área, já trabalho como Programador de Interface e Web Design, assim consegue falar sobre Design, Padrões Web e Tecnologia.

Lucas Ferreira – Além de muitas referências (Links for del.icio.us) o blog tem posts sobre jQuery / Lightbox / PHP.

Luiz Tiago – Formado em Sistemas e trabalhando na área de desenvolvimento web desde 2001, seu blog tem um enfoque em webstandards e novidades na área.

Lutando por WaSP – WaSP é sigla para Web Standards Project (é.. tem um trocadilho no meio, wasp significa vespa). Aldemir fala sobre padrões, acessibilidade, Arquitetura da informação, CSS, Rails, Javascript.. e por aí vai.

Marcos Gomes – Ajudou a fundar e é diretor de tecnologia da boo-box. Trabalha com internet a mais de 10 anos, sendo que só tem 22. Tem muita experiência pra contar no blog.

Maujor – O famoso “dinossauro das CSS”, responsável pelo site “CSS para Web Design”, tem um blog também falando principalmente sobre jQuery, já que lançou um livro em português recentemente.

Mestre SEO – Blog específico em SEO com diversos autores que dão as dicas do que fazer e do que não fazer para obter melhores resultados nos buscadores.

O Desenvolvedor – Com muito javascript, jQuery e prototype o blog é ótimo pra quem deseja largar o flash pra fazer efeitos que poderiam ser feitos com javascript. Além disso o blog fala de padrões web, semântica.

pBlog – No blog do Rodrigo Ghedin e Érico Oliveira o tema é WordPress. Plugins, atualizações, temas, tudo é abordado no blog, ideal pra quem não sabe programar, mas deseja ter um blog bem personalizado.

Pinceladas da Web – O blog de Pedro Rogério chama atenção pelo alto nível dos posts, com boa freqüência de atualização e desde 2006, os assuntos mais falados de seu blog são Acessibilidade, Browsers, CSS, JavaScript, jQuery e XHTML segunda sua tag cloud.

Pixeladas Aleatórias – Análises sobre a web e muitas referências (links for del.icio.us) é o que mais tem no blog, que também fala de HTML / CSS. Sua descrição no seu blog é “Simone Villas Boas é desenvolvedora de front-end, geek em tempo integral”.

Profissão Web – Thiago Melo, um dos colunistas do webinsider, tem seu blog, que com um ano e meio de vida tinha mais de 700 posts, impressiona! Thiago é desenvolvedor e designer de interfaces e já atua na área a mais de 6 anos.

Project 47 – Falando sobre web standards e wordpres, Carlos Eduardo que é desenvolvedor web criou a “sexta feira dos webstandards” que era uma série de links e referências bem interessantes, apesar de não ter dado continuidade, existem 15 posts desses que estão em meio ao seus históricos.

Revolução Etc – O mais famoso blog da lista, tem quase 7 mil assinantes dos seus feeds. Atualmente ele está escrevendo “dicas de como montar um blog” mas aos seus quase 400 posts tem muitos posts técnicos porém bem detalhados, mostrando o porque é de tanto sucesso.

Ruf Space – Falando sobre webstandards e o cotidiano web. Apesar do blog estar praticamente parado, existem posts interessantes em seu histórico na sessão DOM lab.

SEO Cast – O slogan do blog é “muito mais que meta tag”. Além dos posts dando as dicas de SEO também estão disponíveis podcasts sobre o assunto.

Simples Idéias – O blog de Nando Vieira é bem técnico, para aqueles que querem ver código mesmo. O blog está bem focado em Ruby On Rails, mas tem outros posts de outros assuntos.

t de <tag> – Segundo sua descrição, Marcello de Souza é técnico em informática, programador e professor. Entusiasta de novas tecnologias e do uso de software livre. Sendo tudo isso tem muita coisa pra ele escrever como Python, Padrões web, CSS e bastante Ruby On Rails.

Tá dificil… – Usabilidade é o tema do blog que mostra a grande dificuldade que usuários tem para fazer coisas simples como comprar cartucho para Epson ou obter resultados anteiores da mega-sena.

Tableless – Diego Eis ensina CSS / XHTML / jQuery / SEO. Além dos posts escritos, o blog tem diversos vídeos que são tutoriais curtos e bem detalhados mostrando desde implementando html até manipular atributos com jQuery.

Techbits – O tema é TI, Alexandre Fugita escreve as notícias do mercado, como o lançamento do Android, Chrome, Campus Party, twitter, a privadade do facebook, etc.

TecnoBlog – O blog voltado para a Tecnologia, tem uma boa freqüência de posts que dão notícias da internet como “Brasil é o 6º colocado no ranking de ataques de malwares” ou “Yogen Max – carregue a bateria do seu notebook com o movimento dos pés”.

Tecnocracia – Manoel Netto se diz apaixonado por tecnologia, trabalha com web desde 1998. Ele fala sobre internet em geral, o blog é bastante acessado, 1700 pessoas assinam seus feeds.

TidBits – Nosso blog. Eu, Danilo Augusto, programador da AgênciaClick, e Belinha, arquiteta de infromação da Tesla, em meio as brigas de casal, falamos sobre desenvolvimento web e eninamos através de exemplos práticos.

Tulio Faria – Túlio é professor técnico em informática e freela fazendo sites. Programador de diversas linguagens. Apesar disso, seu blog é voltado mais para PHP.

UnderGoogle – Tudo sobre o google. Search Wiki, Friend Connect, Orkut, Gmail, Zeitgeits, Maps, Adwords, etc etc.. o assunto no blog é somento Google e segundo eles, 11 mil pessoas assinam seu rss.

Vagas na Web – E para aqueles que já aprenderam o bastante e talvez seja a hora de ser melhor remunerado, esse blog do yogodoshi posta diversas vagas de empregos todos os dias. Até meu emprego atual, eu fiquei sabendo da vaga por lá.

ViuIsso? – Michel Lent Schwartzman é CCO da 10′Minutos S.A., designer gráfico, mestre em Telecomunicações Interativas pela New York University, articulista do Webinsider e do Yahoo! Tecnologia, juri do Prêmio iBest desde 1999 e professor da Escola Superior de Propaganda e Marketing. No seu blog ele dá as notícias do que está acontecendo na web.

Visie – No blog da empresa de treinamento em desenvolvimento web, consta a agenda de palestras do Élcio Ferreira, vídeos tutoriais e outras coisas ligadas a empresa.

Web, Design e CSS – Cleo, uma Web designer que também trabalha com CSS, XHTML, SEO e usabilidade, fala um pouco de tudo no seu blog, com o conteúdo é bem variado, pode interessar a diferentes áreas.

Webinsider – O blog, patrocinado pelo UOL, conta com diversos colunistas, está ativo desde 2000 e fala sobre o mercado web no Brasil.

WebPoint – Alexandre Magno é membro da equipe do jQuery, no seu blog ele fala muito do framework, escreve diversos tutoriais, fala de plugins, enfim… dá todas as dicas pra quem quer trabalhar com a ferramenta.

Yogodoshi – Cayo Medeiros, além do Vagas na Web, tem esse blog que fala sobre SEO, jQuery, Javascript, cita boas referências e tem o post “O Melhor da Semana” (que está da edição 32) com links das notícias que chamaram atenção, todas separadas por categorias, como Tuturiais, Vagas de Emprego, Dicas, Notícias, Artigos, etc..

Se alguém quiser incluir um blog, deixe comentado aqui o endereço do blog que eu atualizo o post, desde que o blog se encaixe na lista, é claro.

[]s

Ficou tudo muito abstrato né?

Imagine o seguinte menu (onde cada time tem um link próprio):

Agora pergunto:

Quantas imagens são necessárias pra fazer essa coleção de escudos de times?

Apenas uma imagem.

Fixando a altura e a largura de cada botão, podemos posicionar o background de cada link com o css position.

É mais trabalhoso, mas tem vantagens:

Carregando uma imagem grande ao invés de várias imagens pequenas, economizamos banda (nesse exemplo eram 31kb agora são 11), porque pra cada imagem tem cabeçalho, paleta de cores usadas na figura, enfim, uma série de dados que se repetiam em todos os times. E quando tempos uma figura só no lugar de 32, esses dados são preenchidos uma vez somente, e assim economizamos banda.

Além disso, o que melhora e muito a velocidade, é fazer uma só conexão HTTP. Em arquivos muito pequenos, costuma demorar mais pra estabelecer uma conexão com o servidor do que o próprio download em sí. Então, 31 conexões a menos com o servidor, dão uma boa diferença no tempo total do load da página.

É simples pra fazer, tem duas formas.

Imagine o HTML desse exemplo:

<ul class="escudos">
	<li><a href="/atleticomineiro">Atlético Mineiro</a></li>
	<li><a href="/atleticoparanaense">Atlético Paranaense</a></li>
	<li><a href="/barcelona">Barcelona</a></li>
	...
</u>

A primeira forma, que eu acho mais simples, funciona como um “mapeamento” da imagem:

/*
	Adicionando a única imagem de
	backgrounde e definindo largura na UL
 */
ul.escudos{
	background:url('times.png');
	width: 280px;
}

/*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

A segunda forma é uma coleção de css position

/* Definindo a largura somente */
ul.escudos{	width: 280px;}

*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

/*
	Adicionando o background com todos
	os escudos em todos os li's
*/
ul.escudos li{ background:url('times.png'); }

/*
	Adicionando um background para cada li
	(seria necessario colocar uma classe / id
	para cada elemento). Veja os exemplos:
*/
ul.escudos li.atleticomineiro { background-position: 0 0; }
ul.escudos li.atleticoparanaense { background-position: 35px 0; }
ul.escudos li.barcelona { background-position: 70px 0; }

A mesma técnica pode ser aplicada em menus, principalmente com mouse over:

<ul class="menu">
	<li class="videos"><a href="videos.php">Vídeos</a></li>
	...
</u>

A imagem é uma só para o estado normal e o estado com over.

E no CSS:

#menu li.videos a {
	background: url('/images/video.gif');
	display: block;
	width: 71px;
	height: 19px;
	text-indent: -9999px;
}
#menu li.videos a:hover { background-position: bottom; }

Repare que o height do link é metade do tamanho da imagem, assim, quando passa o mouse por cima do botão, o background é movido pra baixo dando a sensação de duas imagens diferentes.

Suguestões?

Deixem comentários dizendo quantos pontos fizeram.

E pra quem ainda não fez, também tem o Quiz de Javascript , o Quiz de XHTML e o Quiz de jQuery .

[]s

Ok, mesmo que o site seja testado no Firefox, ie6, ie7, Safari, Chrome e Opera, quem garante que os navegadores Netscape 6.0, Ant Galio 3.1, Blaze 6.0 ou o Playstation 3 5.0 vão interpretar corretamente também?

E é por isso que devemos validar o código. Existem diversas ferramentas para validação de código.

A mais importante delas, creio que é o HTML validator, uma extensão de firefox. Além de válidar seu (x)html, ele diz o que está errado e como consertar o que é ótimo pra quem está começando a programar interface.

Para validar CSS, a melhor opção é o CSS validator da W3C. Infelizmente não existe (ou não conheço) nenhuma opção desktop. Mas mesmo assim, vale a pena utilizar.

Já o link-checker é um validador de links que analisa seu site e procura por links quebrados, muito útil. A análise é BEM completa, e demora muito tempo, afinal ele checa tudo. Analisando a home do TidBits ele demorou 286 segundos e checou mais de 200 arquivos.

Outras ferramentas como o firebug, ajudam bastante na codificação, principalmente pra detectar erros de JavaScript. E finalmente, para garantir a acessibilidade do seu site, existe diversas opções, duas em português: o Da Silva e o ASES desenvolvido pelo governo eletrônico.

Mas o que é uma “impressão amigável”?

Impressão amigável, é definir um css só para o usuário imprimir o conteúdo.

Quando mandamos imprimir uma página, estamos interessados somente no conteúdo. A página de impressão não deve vir com menu, cabeçalho, rodapé, banner, background do site, ilustrações enormes, etc etc… e é possível retirar esses elementos na hora do impressão com um css a parte.

Não é dificil, no tidbits nós usamos um template pronto de wordpress (que naturalmente, veio sem um css de impressão) e pra colocar eu criar um, não demorou nem 10 minutos.

O uso de folhas de estilo para equipamentos específicos é feito através do atributo media, existem vários tipos de media, mas na prática somente 3 tipos são usados, veja a relação abaixo de medias e dispositivos:

• all – todos os tipos de dispositivos;
• screen – computadores;
• print – impressoras;
• handheld – PDAs, mobiles palmtops;

Existem duas formas de escrever um atributo media que é colocado sempre dentro do <head> é claro:

Chamada externa:

<link media=“screen” type="text/css" href="style.css" rel="stylesheet"/>
<link media=“print” type="text/css" href="print.css" rel="stylesheet" />

<!-- ou assim pra quem prefere com import !-->

<style type="text/css">
@import url("style.css") screen;
@import url("print.css") print;
</style>

Repare que chamamos um css pra tela e um pra impressão.
Quando o atributo media não é declarado o padrão é media=”all”.

ou no css:

@media screen {
	h1 { font-size:28px; color:#ff0;}
}
@media print {
	h1 { font-size:14px; color:#000;}
}

Basicamente é bem rápido, não é necessário mexer em muitas tags, veja o que foi necessário para implementar aqui no tidbits:

@media print {
	div#header, div#footer, div#sidebar-wrapper,
	p.bookmark-me, div.post-footer,
	form#commentform, h3.comentar {
		display:none;
	}
}

1. Ignorar a compatibilidade de browser
A gente já falou um monte sobre crossbrowser aqui no Tidbits. Já falamos de truques para checar se o seu site está compátivel com todos os navegadores, ensinamos a utilizar os Global Resets para zerar as propriedades automaticamentes setadas pelos browsers, e o Danilo no post anterior falou sobre o CSS compatível sem uso de hacks. Com esse material todo, você não pode nem pensar em deixar o seu CSS “quebrar”…

2. Não validar o HTML e o CSS
Também no post sobre garantir a qualidade do seu site em todos os browsers, eu dei o link de ferramentas de validação. Passem por elas para garantir um código semântico!

3. Não utilizar classes para formatações que se repetem em vários elementos
Se você tem elementos que tem propriedades de formatação iguais, utilize apenas uma class para definir essas propriedades para todos elementos. Se você tem em uma página, por exemplo, todas as fotos e boxes de um site tem borda e flutuam a direita, você pode simplesmente criar uma class para definir esses atributos e invocá-la em todos os elementos que a utilizam. Se, por um acaso, você precisasse mudar a cor da borda, teria que fazer isso em todos os elementos, se não atribuir a propriedade uma única vez.

4. Utilizar nomeclaturas ruins para classes e ids
Isso pode ser uma questão aparentemente insignificante, mas se você precisar fazer qualquer alteração no CSS depois de um tempo, vai se arrepender amargamente de não ter gastado 2 segundos a mais do seu tempo para pensar em um nome mais descritivo do que #box_top ou .coluna_left. Rótulos orientados à posicionamento ou ao formato do conteúdo dificultam a manutenção e substituição desse CSS.

5. Usar CSS para tudo
Quando se abandonaram os layouts com tabelas as tabelas ficaram tão mal faladas que até quando se precisa de tabelas, as pessoas tentam fazê-las da maneira mais díficil. O conceito é “Tableless” e não “Tablenone” – com o perdão do trocadilho infeliz. Enfim, o HTML precisa ser semântico, e quando você exibe dados em uma tabela, nada mais semântico do que utilizar uma tabela mesmo, não?

6. Usar CSS inline
Um dos piores erros que se pode cometer, é não se utilizar o conceito de “layers” (camadas), na hora de desenvolver uma interface. Na época que eu aprendi a mexer com o Photoshop, eu levei um tempo até perceber o qual importante era esse conceito, de manter cada coisa, em um plano diferenciado, e como isso facilitava a aplicação, manutenção e alteração de qualquer erros. Esse conceito é igualmente aplicável para o CSS, mantenha ele sempre em um arquivo externo. Um dos principais problemas remete ao item 3 dessa lista: com o CSS inline, você precisaria atribuir os valores para cada elemento individualmente, o que se transformaria em um caos, quando precisasse fazer modificações no layout.

7. Carregar muitos arquivos de CSS
Dividir o conteúdo do CSS em arquivos separados, facilita a manutenção – até certo ponto. Se você divide demais o CSS, pode acabar dificultando não só a manutenção, pela dificuldade de encontrar o arquivo que exatamente está procurando, como também o carregamento da página. Arquivos de CSS são bem leves (em sua maioria), o problema é que muitas conexões com o servidor, que precisam ser feitas para cada arquivo de estilo que for baixado, normalmente demoram mais que o próprio download. Normalmente, eu e o Danilo utilizamos um arquivo default.css setando propriedades que replicam em todo o site, por exemplo o CSS do Header, Footer, Menu lateral, e coisas do tipo. E criamos para cada área, o arquivo nomedaarea.css com as propriedades específicas da página, ou por exemplo um conteudo.css com as propriedades de css de páginas geradas dinamicamente.

8. Não utilizar o Firebug para acelerar os ajustes do css
O Firebug é uma ferramenta mais importante que o editor de códigos. Se um layout está com problemas de posicionamento, ou você está com dificuldades de entender porque uma div está herdando um padding fantasma de algum lugar, o Firebug ajuda você identificar quais são as propriedades de css que estão influenciando aquele elemento. Além do CSS, ele também facilita visualizar a estrutura do HTML, e identificar possíveis erros.

Acho que seguindo essa lista, já é possível otimizar o tempo de desenvolvimento, e ao mesmo tempo fazer um CSS de melhor qualidade. E se alguém se lembrar de algum outro erro que também poderia ser evitado, fique a vontade para comentar, e construirmos nossa lista juntos :)

O jeito correto de escrever css é encontrar uma estrutura que funcione em todos os navegadores. Não faça o site pensando apenas no seu navegador favorito para depois encher de hacks para os demais e meter a culpa neles.

Navegadores são atualizados sempre, isso quando não surgem novos. A 6 meses atrás não existia o Google Chrome, Firefox 3 e pouco era utilizado internet em celulares no Brasil. Se o layout de um site foi construído errado e “consertado” com hacks, provavelmente o mesmo site está quebrando o layout nesses novos navegadores, por isso não vale a pena. Antes de criar uma hack, pense 10 minutos a mais resolver seu problema de outra forma. Tudo bem, tem hacks que realmente precisamos colocar por falta de suporte do ie6. min-height e max-height, o suporte a imagens alpha ( pgn24 ) tão usado pelos designers hoje em dia e os pseudo seletores :first-child e :last-child. Essas 3 opções, somente essas 3 não tem jeito mesmo, é colocar expression no seu css e filter pro png, mas de resto, nenhuma hack é necessária.

Outras técnicas que não recomendo são: display table, uso excessivo de float, margin com valores negativos, tudo isso não passa de gambearra para fazer o layout ficar no lugar onde está dando erro.

Dicas para ter menos problemas ao construir um css :

Utilize o CSS Global Reset para diminuir as diferenças entre os browsers. Cada browser, coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, etc… Com esse código, essas diferenças caem quase que por completo.

Para elementos fixos (que não tem variedade de tamanho) dentro de um container, tipo botões ou input / label de formulário, pense em utilizar position absolute, é uma técnica muito simples de se trabalhar quando se tem um xhtml válido, pois todos os navegadores interpretam da mesma forma a posição do elemento, ao contrário de float e margin que dão muitos problemas. O site americano Position Is Everything recomenda a técnica e explica melhor como utilizar.

Aqui no TidBits também nós disponibilizamos uma apostila e material de estudo sobre padrões web em português

<img src="imagemPesada.jpg" alt="alt da imagem" id="imagemPrincipal"/>

E no css :

img#imagemPrincipal{
	background: url('loading.gif') no-repeatcenter center;
}

Um outro exemplo do que se pode fazer com isso, é colocar níveis de profundidade, veja o exemplo abaixo:

Esse não foi feito por mim, eu achei na internet mas infelizmente não sei quem fez para dar os créditos, se alguém souber, avise-me.