Às vezes é devido a uma programação desorganizada desde o início, outras é devido aos diversos “hacks” e “tweaks” que nos vemos obrigados a realizar nos CSS’s para que o resultado final seja cross browser sem haver diferenças de maior no layout ou mesmo que o layout não fique “partido” ou desalinhado.

Seja qual for a causa… não tem de ser assim !
Escrever CSS limpo e fácil de gerir torna-se muito mais simples quando começamos com o pé direito em vez de começar com o “pé que está mais à mão”, aqui estão 11 dicas para manter o seu código super-limpo e fácil de gerir e alterar no futuro.

1. Mantenha-se organizado !

Tal como em tudo na vida, compensa mantermo-nos organizados ao invés de ir encaixando id’s e classes à medida que nos vão vindo à cabeça… mantenha uma estrutura coerente.
Vai ajudá-lo  a manter a parte do “cascading” do CSS (Cascading Style Sheet) em mente e mantém os seus estilos aptos a tirar vantágem da herança de estilos em vez de repetir estilos desnecessáriamente.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a estrutura que melhor funciona para si mantendo em mente edições futuras aos estilos e a possibilidade de outro developer ter de pegar no projecto.

• Hacks e Tweaks
• Links e Fonts de texto
• Layout Principal
• Estruturas Secundárias do Layout
• Elementos de Formulários
• Outros Elementos Genéricos

2. Título, Data e Assinatura

Informe as outras pessoas sobre quem escreveu o seu CSS, quando foi escrito e quem devem contactar se tiverem questões sobre o mesmo.
Isto é especialmente útil quando estamos a desenhar templates ou themes.

Hey… que é aquilo  a falar das cores ? Ao longo do tempo, cheguei à conclusão que adicionar uma simples lista das cores usadas na folha de estilos é muito útil durante o desenvolvimento inicial e quando se estão a fazer ajustes mais para a frente no projecto.

Isto poupa-o de ter de abrir o photoshop ou o fireworks para ir buscar uma cor do design, ou ter de andar à procura da cor certa na folha de estilos… Quando precisar da cor para aquele azul em concreto, basta ir lá acima e copiá-lo.

3. Tenha um arquivo de CSS’s genéricos

Uma vez tendo uma boa estrutura para usar, apague tudo o que não é genérico e guarde esse CSS como template para usar mais tarde noutro projecto.

Pode guardar vários tipos de CSS… um layout de duas colunas, três colunas, um layout de blog,  print, mobile e assim por diante.

Não faz sentido nenhum re-escrever cada um dos seus estilos do inicio especialmente quando está a usar o mesmo tipo de layout e método para cada um.

4. Use nomenclaturas úteis e simples de entender

Pode ver acima que eu baptizei algumas Id’s com o nome col-alpha e col-beta. Porque não chamá-las de col-esquerda e col-direita ? Pense em edições futuras, sempre.

Para o ano pode precisar de redesenhar o seu site e mover essa coluna-esquerda para a direita… não deve precisar de mudar a id na folha de estilos e no HTML só para alterar a sua posição.

Claro que podia só reposicionar a col-esquerda para a direita e deixar a id como #col-esquerda mas é um pouco confuso não acha ? Isto não lhe deixa muita margem de manobra para alterar a posição dos elementos um dia mais tarde.
Uma das principais vantagens de utilizar CSS é a possibilidade de separar os estilos do conteúdo do próprio site.  Assim você pode redesenhar completamente o site sem mexer em mais nada que não o CSS, por isso não torne o CSS confuso no futuro utilizando nomes limitativos. Use nomenclaturas versáteis e mantenha-se consistente.
Deixe posições ou palavras específicas de estilo fora dos seus estilos e id’s.
Uma class .link-azul das duas uma, ou vai dar-lhe mais trabalho ou fazer com que a sua folha de estilos fique muito confusa quando um dia mais tarde o seu cliente pedir para mudar esses links azuis para laranja.

Nomeie os seus elementos baseado no que eles são e não no seu aspecto. Por exemplo, .comentario-verde é muito menos versátil que .comentario-B, e .fonte-grande é muito mais limitativo que .titulo-artigo .

5. Hifens e Underscores

Browsers mais antigos têm a tendência a baralharem-se com underscores no CSS, ou simplesmente não o suportam.
Para uma melhor compatibilidade cross-browser, comece a habituar-se a user hifens ao invés de underscores
Utilize #col-alpfa em vez de #col_alpha.

6. Não se repita

Reutilize atributos sempre que possível agrupando elementos em vez de atribuir os mesmo estilos.
Se o seu h1 e h2 utilizam o mesmo tamanho de font, cor e margens, agrupe-os utilizando uma vírgula.

Isto:

Deve fazer uso de atalhos sempre que possível. Esteja sempre atento a oportunidades de agrupar elementos e usar atalhos de estilos.

Pode conseguir tudo isto:

Com apenas isto:

É muito importante que compreenda a ordem pela qual o CSS intrepreta estes atalhos: Topo, Direita, Baixo, Esquerda. Um grande círculo no sentido dos ponteiros do relógio que começa no meio-dia.
Também, se os seus atributos para o Topo e Baixo ou Esquerda e Direita são os mesmos só precisa de utilizar dois:

Isto define as margens de Topo e Baixo a 1em, e a esquerda e direita a 0.

7. Optimize para folhas de estilos Peso-Pluma

Utilizando as dicas acima  vai poder cortar bastante no peso da sua folha de estilos. Uma folha de estilos mais leve significa tempo de loading menor e mais leve significa também maior facilidade de manter e actualizar.

Corte no que não precisa e consolide onde possível agrupando.
Tenha cuidado quando usar frameworks de CSS’s adaptadas, a probabilidade de herdar uma data de porcarias que não vão ser precisas é bastante elevada.

Outra dica rápida para CSS mais leves: não precisa de especificar uma unidade de medida quando utilizar 0.
Se uma margem está definida como 0, não precisa de dizer 0px ou 0em. Zero é zero independentemente da unidade de medida, e o CSS entende isso.

8. Escreva a sua base para Gecko,depois adapte para Webkit ou IE

Poupe uma data de dores de cabeça e escreva o seu CSS para browsers Gecko (Firefox, Mozilla, Netscape, Flock, Camino).
Se o seu CSS funciona como deve ser em Gecko, é muito mais provável não ter qualquer problema em Webkit (Safari, Chrome) e no Internet Explorer.

9. Valide o seu CSS

Faça uso da Ferramenta de Validação de CSS da W3C.
Se está preso e o seu layout não está a fazer o que quer que faça, o Validator de CSS da W3C  é uma ferramenta muito útil a apontar erros na folha de estilos.

10.  Mantenha a casa arrumada !

Separe os CSS específicos para um determinado browser para uma folha individual e inclua como for necessário com javascript, código server-side ou  Comentários condicionais. Use este método para evitar hacks esquisitos na sua folha de estilos principal.
Isto vai manter a sua folha de estilos base limpa e fácil de entender e editar.

Temos de lá voltar para mandar um fame

Props to Mamacita, thanks for the sponsorship hehe **

Façam o download aqui ou cliquem na imagem.

Toda a concepção gráfica e backoffice foi desenvolvido por moi mêmme.

Conta com galerias de imagens dinamica com backoffice que permite inserir e catalogar por categorias um número ilimitado de imagens.

Visitem www.bad-bones.com !

Façam o download AQUI ou cliquem na imagem

Multiple tips on debt reduction planning including video tutorials, this is your number one lifeguard when you face credit problems.

Please check out financira.com

Conta também com um fórum onde a comunidade discute ideias e troca opiniões sobre os mais variados assuntos.

Com biografias de artistas, músicas para escutar em streaming e videos sempre actualizados o fado.com é sem dúvida um portal a visitar.

Entre no mundo do fado .

O JogaTuga é um site de jogos online, com apenas um browser e acesso à internet, podes jogar diversos tipos de jogos, desde os que tem temáticas de acção e se passa o tempo todo a disparar, até aos puzzles ou mesmo os de estratégia.

Neste portal de jogos grátis há também disponível para os utilizadores registados um sistema de records que faz com que os utilizadores compitam entre si pela pontuação mais alta num determinado jogo.

É o Punto GT mais bonito que algum dia vi, com alterações estéticas “no limite”… se fizesse mais uma que fosse iria estragar tudo.

Sem dúvida um GT com RAÇA