Onze dicas para trabalhar com CSS (Cascading Style Sheets)

0

robot-507811_960_720

Quer você seja iniciante na área ou já tenha desenvolvido vários sites: a essa hora, você já sabe que as folhas de estilo externas (CSS – Cascading Style Sheets) são obrigatórias em qualquer projeto. Felizmente, este recurso pode ser usado com algumas dicas que irão facilitar nosso trabalho. Veja algumas delas a seguir.

1 – div1 é diferente de menu

Não dê nomes como div1div2div3 aos seus elementos. Eles não explicam bem as coisas e quando fizer manutenção vão tornar seu trabalho mais difícil e lento. Prefira sempre nomes explicativos, como menu ou barra_links.

2 – Maiúsculas e minúsculas

Nomes de elementos fazem muita diferença entre letras minúsculas e maiúsculas: BarraLinks não é a mesma coisa que barralinks. Tenha atenção na hora de usar seu elemento no HTML.

3 – id x class

Para elementos que aparecem somente uma vez no layout (menu, cabeçalho, rodapé, etc) use a declaração id, e depois um sinal de # (como #menu). Para elementos que vão aparecer muitas vezes, use a declaração class, e depois use um ponto (como .noticia).

4 – Compartilhe declarações entre vários elementos comuns

Se vários elementos vão ter características comuns, escreva-os todos de uma vez, separados por vírgula: h1, h2, h3, h4 {             font-family: Arial, Helvetica, Sans-Serif;           }

monitor-1307227_960_720

5 – Tenha atenção à hierarquia e organize-se

Por ser uma folha de estilo em cascata, a última declaração é a que tem valor. Tenha atenção para não declarar um elemento em duplicado: quando fizer manutenção, talvez o código não funcione pois há dois elementos no código. (por isso organização é fundamental!).

6 – Comente os códigos avançados

Quando você usar o CSS para efeitos avançados, como um menu em abas, comente seu código para lembrar o que cada parte dele faz.

7 – Anote as cores

Mesmo que você consiga fazer cálculos de cabeça pra saber a tonalidade da cor sem uma tabela de cores, é impostayte poupa tempo anotando a cor correspondente de cada código no seu arquivo.

8 – Declare as unidades

Quando trabalhar com valores que não sejam zero, declare as unidades (px, pt, etc). Cada navegador tem uma unidade padrão quando ela não é particularizada, gera resultados diferentes em navegadores diferentes.

9 – Teste o efeito desejado em todos os navegadores

Barras de rolagem coloridas (felizmente já é passado) e divs semi-transparentes são muito bonitinhos, mas podem não funcionar com todos os navegadores. Projete seu site de uma maneira elegante mas sem exagerar nos enfeites, e, novamente, tenha certeza de que seu CSS tem o mesmo efeito em diferentes navegadores.

10 – Não confie na sua memória

Com o tempo, é normal que você comece a decorar os principais elementos e seus atributos. Porem é importante ter sempre um guia de consulta rápida, para tirar dúvidas sobre o funcionamento deles.

11 – Tenha inspiração

Sites como o Maujor e o  css Zen Garden são excelentes para ter uma ideia de novas tendências. Visite esses e outros endereços para ter novas ideias.

 

 

Deixe uma resposta