Ir para conteúdo / Skip to content

ESTRUTURANDO O CSS DE FORMA EFICAZ

Postado em: 3 de maio de 2006 por Pedro Rogério

Escrever uma folha de estilo eficaz é muito importante para o desenvolvimento de um Website. A medida em que você cria bons hábitos, sua técnicas com CSS vão evoluindo naturalmente. A habilidade de ficar perdido com seu código se torna hábito a cada linha que você escreve, a menos que você escreva eficazmente.

A medida em que você vai se familiarizando com programação, naturalmente você aprende o conceito de comentários, parece besteira você ficar alí explicando blocos de código, mas por outro ponto de vista, quando você for fazer uma atualização em seu site, rapidamente você pode localizar o que quiser. Isso não é só benéfico para você, fazendo isso você está ajudando outras pessoas que estão lendo o seu código, imagine só se você trabalha em uma empresa de Web Design, onde uma equipe toda está envolvida, se o seu companheiro de trabalho não fizer um trabalho eficaz, vai acabar complicando a sua vida e muito.

Um exemplo bom a ser seguido seria, quando você estiver desenvolvendo uma folha de estilos, é separar tudo em blocos, mas como isso, procure declarar uma seção para o topo, outra para o menu, outra para os links, outra para o rodapé, e assim por diante. Por isso o nome de Folhas de estilo em cascata, procure sempre declarar o seu código de uma forma organizada, abaixo você pode ver um exemplo:


/* Headers */
h1, h2, h3, h4 { font-family:Arial, Verdana, sans-serif; }
h1 { font-size:24px; font-weight:normal; }
h2 { font-size:19px; color#000; padding-left:15px; }
h3 { font-size:17px; color:#f00; }
h4 { font-size:14px; letter-spacing:2px; }

/* Links do Site */
a { text-decoration:none; color:#00f; }
a:hover { text-decoration:underline; }
a:active { color:#f00; }
a:visited { color:#ccc; }

A maneira de estruturar seu CSS deve seguir a sua própria convicção, uma vez trabalhando dessa forma, pense em ir sempre para frente, nunca para trás, você verá como seu trabalho irá fluir mais confortavelmente.

E quanto aos que usam vários estilos em suas páginas?

Eu não descrimino que faz isso, um exemplo são as pessoas que preferem criar uma folha de estilos para a estrutura do site, outra para a Tipografia. Eu aconselho usar folhas de estilo separadas para, por exemplo, impressão, dispositivos móveis, assim é mais fácil você editar o código para que quando o camarada for imprimir, por exemplo, você criar uma folha de estilos mais limpa do que a que está sendo demostrada na tela.

Experimente utilizar essas técnicas e você vai ver como sua vida vai se tornar mais fácil.

Se tiver um tempo, leiam também:

Esse post ainda não possui comentários... experimente ser o primeiro a comentar.

Deixe seu comentário