10 Dicas para Melhorar o seu CSS

Ao criar a sua primeira folha de estilo (ficheiro CSS), pode ser um pouco confuso se vem habituado a usar tabelas, ou se nunca escrever código na vida.
Neste curto artigo, vou vos indicar 10 dicas para que possam melhorar as vossas folhas de estilo, recorrendo a menos código de forma mais limpa e eficiente.
Espero que gostem!

Melhor o seu CSS com as seguintes dicas

Bem, segue-se a lista das 10 dicas para melhorar o CSS! É altamente recomendado que as sigam para que cada folha de estilos que façam, seja o mais eficiente possível!

1. CSS Reset

A escrita de ficheiros CSS pode-se tornar bastante monotomo e “stressante” quando necessita de escrever diferentes coisas que fazem o mesmo, para que o aspecto do que pretende seja compatível nos diversos browsers. É por esta razão que, é recomendado a todos os designers fazer o “Reset” dos estilos presentes, que por vezes são próprios de cada browser. Fazendo o reset dos estilos, tal como o nome indica, todos os estilos predefinidos dos browsers iram ficar nulos, podendo começar a construção da folha de estilo sem “stresses” e incompatibilidades.
Podem ver a folha de reset que eu utilizo: reset.css.

2. Indentação do Código

Quando tem folhas de estilo demasiado longas, recorra à indentação do código, para que haja uma melhor compreensão.

Exemplo de código não indentado:

.classeCSS {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

Exemplo de código indentado:

.classeCSS {
        background: #FFF;
        border: 0;
        color: #252525;
        float: left;
        margin: 0;
        padding: 0;
}

3. Comentários

Mais uma vez, para que o seu código CSS seja mais compreensível, porque não recorre a comentários?
Ao recorrer a eles, o seu código ficará melhor estruturado e de mais fácil compreensão.

Exemplo de um comentário:

/********** ZONA do CABEÇALHO **********/
.header { ... }
...

Ao utilizar os comentários, a navegação pelo documento será muito mais rápida, evitando percas de tempo a procurar linha-a-linha o que pretende.

4. Uma Regra = Uma Linha … Várias Regras = Várias Linhas

Seguindo a dica acima, é possível diminuir o tamanho das suas folhas de estilo de forma drástica!
De seguida irei apresentar dois exemplos de como se pode escrever o código para que o tamanho final dos ficheiros .CSS seja reduzido:

.classe1 { border: 0; }

.class2 {
	background: #FFF;
	border: 0;
	color: #252525;
	float: left;
	margin: 0;
	padding: 0;
}

5. Seja consistente com o seu código

Nas várias folhas de estilo que fui escrevendo, e que continuo a escrever, sigo quase sempre o mesmo modelo. É algo que a maioria não repara à primeira vista, mas se analisar bem é algo que verá.

Por exemplo, quando começa a escrever tudo em blocos de diferentes tipos, elementos do cabeçalho todos juntos, elementos do rodapé todos juntos, etc, continue assim em todas as vezes que criar novas folhas de estilo.

6. Separar os Alhos dos Bogalhos

Alguns designers recusam-se a usar os famosos hacks de CSS, para que haja a máxima de compatibilidade entre browsers. Isto é, sem dúvida alguma, uma prática muito má… Pois, ora o cliente está à espera de vez uma coisa igual, seja onde ele teste…
Se você recorre aos hacks de CSS, porque não separa da sua folha de estilos? Crie um nova folha de estilo, para que apenas seja utilizada caso o utilizador queira vez o seu site, por exemplo, em Internet Explorer.
Separando os seus estilos, irá aumentar a velocidade de carregamento do website por parte de utilizadores que não necessitem dos “hacks” especiais para verem o conteúdo.
Se está a pensar, “Isto é muito bonito falar… Mas como separo e digo ao browser qual folha de estilo carregar?”, a resposta é simples! Segue-se um exemplo:

...
     link rel="stylesheet" type="text/css" href="/css/style.css"
media="screen, projection"
     !--[if lt IE 8]
       link rel="stylesheet" type="text/css" href="/css/ie.css"
media="screen"
     ![endif]-->
       link rel="stylesheet" type="text/css" href="/css/print.css"
media="print"
...

Nota: “if lt IE 8″, com esta condição, caso o site seja carregado em Internet Explorer 8, o browser sabe que terá que carregar a folha de estilo com nome “ie.css”.

7. Aprenda e utilize código curto

Isto é uma das melhores dicas na escrita do CSS…
Para aumentar a escrita das folhas de estilo, utilize código curto… Isto não ajuda só no tempo de demorar a escrever uma folha de estilos, mas também ajuda a diminuir o tamanho final do ficheiro.

Exemplo de utilização de código “normal”:

.classeCSS {
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 40px;
	margin-left: 10px;
}

Exemplo de utilização de código curto:

.classeCSS { margin: 10px 15px 40px 10px; }

Agora devem estar a perguntar-se… “Mas como sei qual é o top, right, bottom e left”?
A ordem é exactamente essa, top > right > bottom > left , pensem no sentido do ponteiro do relógio, começando sempre no “top”.

8. Criação um um “índice”

A criação de um pequeno índice no ínicio de cada folha de estilo que cria, irá ajudar você, e outros, uma navegação mais fácil no documento. Não custa nada, e dá um aspecto bastante profissional ao seu trabalho.

Exemplo:

/*****************************************************
1. ÁREA de CABEÇALHO
2. ÁREA de NAVEGAÇÃO/MENU
3. ÁREA de CONTEÚDO
4. ÁREA de RODAPÉ
*****************************************************/

9. IDs e Classes perceptíveis

Não acham frustrante, quando alguém vos pede para alterar uma cor de uma DIV, e ao tentar alterar, deparam-se com algo deste género:

.istoestabonito1 { ... }
.zonaesquerd { ... }
#curvadalidolado { ... }

Perceberam? Não? A ideia era mesmo essa…
Porque não utilizam nomes ilustrativos do que cada bloco diz respeito…

.cabecalho { ... }
.titulo-conteudo { ... }
.menu-principal { ... }

Agora já perceberam certo?

10. Alfabetize a sua escrita

Esta é uma daquelas dicas, que, com a experiencia será muito mais fácil de alcançar.
Conhece o alfabeto certo? Então porque não define as regras de cada classe ou ID de forma alfabetizada? Mais tarde, quando for necessário alterações, será mais fácil para si encontrar exactamente aquilo que precisa…

Exemplo de utilização:

.classeCSS {
	border: 1px solid #000000;
	color: #C1C1C1;
	font-size: 14px;
	line-height: 24px;
	margin: 25px;
	padding: 0;
	position: relative;
	z-index: 101;
}

E é isso… as 10 dicas para você começar a escrever código CSS melhor, mais rápido, e mais eficiente!
Espero que seja útil para si, caso tenha alguma dúvida, já sabe! Utilize os comentários abaixo, ou então contacte-me privadamente utilizado o formulário de contacto presente no site.

Abraços e Beijinhos!

Artigo original: Webdesign Ledger – 10 Tips for Writing Better CSS