Dicas úteis para melhorar a criação de estilos CSS

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Este é um guest post enviado por Nelito Zangui para o RBtech Developer.

Este artigo é uma adaptação a um post publicado em 2008 por António Lupetti, no qual é feita uma abordagem sobre formas de otimização das folhas de estilo CSS. São apenas técnicas vistas do ponto de vista do autor pelo que, as sua implementação fica a cargo do desenvolvedor. O objetivo é mostrar como se pode reduzir a complexidade e otimizar a estrutura do CSS de um projeto, tornando fácil a sua manutenção.

A implementação das folhas de estilo em CSS veio descomplicar o processo de montagem de websites, mas apesar disso, desenvolver código CSS para layouts complexos pode ser uma tarefa dura para o webdesign, sobretudo se não houver um prévio planejamento para a sua criação.

Planejamento é essencial

Como em qualquer projeto, perguntar-se “onde pretendo chegar” e se estabelece uma linha de orientação para se atingir um objetivo. E ao criar um novo projeto para web (site/blog ou outro sistema) deve-se fazer a mesma pergunta, antes mesmo de abrir o software de edição.

Começar um projeto as escuras – digamos assim – equivale a tomar um caminho sem saber o tempo que leva e o seu destino. E nos meandros do desenvolvimento web, criar um projeto sem um prévio plano é mergulhar num trabalho infinito. As complicações vão surgindo ao longo e, num ápice, pode-se perder o foco! É importante, antes mesmo de começar a “codificar”, traçar as diretrizes para o trabalho.

Uma vez definido, passar para a montagem da estrutura do site e projetar a folha de estilos será um processo mais limpo e menos penoso.

Nesta faze, tudo o que se precisa é um “rascunho”: um lápis, uma borracha e uma folha de papel são as ferramentas principais. Estranho? É mesmo: neste papel devem ser traçadas as principais áreas do projeto, sem adicionar muitos pormenores. Podem ser destacadas, por exemplo, a largura (width), as linhas, margens e paddings, quais os elementos que serão repetidos e quais serão estáticos, que cores serão usadas, etc, todos os elementos base para o layount.

À medida que este esboço for sendo criado, esta sendo montada também a estrutura da folha CSS. Ao fim de tudo, teremos a estrutura Html e respectivo CSS embora ambos como drafts apenas. Tendo isto, pode-se partir para a sua edição/criação usando software de sua preferência.

Apenas um ou vários arquivos CSS?

Uma vez montada a estrutura base do projeto e do CSS, a segunda preocupação é com a tomada de decisão em usar um único ou vários arquivos de CSS para o projecto. Parece besteira, mas a verdade é que, com o crescer do projecto, crescerá também a folha de estilos CSS.

Alguns desenvolvedores defendem e têm separado o CSS em vários arquivos para depois importá-los no projeto, mas afinal, qual seria a melhor forma: usar um arquivo único, ou separá-lo em vários?

Na verdade não existe uma regra específica a definir esta prática. Cada desenvolvedor, em função do seu projeto e suas particularidades, deverá optar por uma das vias. Aliás, esta escolha tem impacto (não só por causa disso...) no tempo de carregamento da própria página e poderá, futuramente, levar à uma mudança de postura em relação ao problema.

Se o template a ser montado é muito complexo, a separação do arquivo CSS em diversas folhas pode ser uma solução viável. Podem ser dividos em função das seções do projeto, por tipo de elementos (ids e classes) ou ou por outra, desde que facilite o processo. Se no entanto, o arquivo é para um layout simples, um único arquivo seria o ideal; é muito mais fácil gerir um do que dois arquivos.

Criar CSS bem estruturado

Já frisamos que o arquivo CSS cresce à medida do projeto. E quanto são muito extensos podem ser difíceis de gerir porém, uma boa estruturação torna a tarefa muito mais fácil e agradável.

Um arquivo bem estruturado não é só aquele que criado em conformidade com as padrões do W3C mas também que seja de leitura fácil, sobretudo para quem vai editá-lo posteriormente. Fica muito mais fácil, por exemplo, ir direito a uma seção específica da folha de estilos do que ir rolando à procura da linha a ser editada.

Com algum tempo, trabalho e bom gosto consegue-se um resultado satisfatório para este caso. Veja algumas linhas práticas:

Simplicidade

Este requisito consiste em deixar de fora todos os items desnecessários. Se com uma div podemos ter o resultado de 10, por exemplo, não precisamos criar as dez divs. Aqui voltamos a focar a questão do rascunho: podemos, de forma mais pormenorizada (sem retirar o que se disse anteriormente) destacar as partes que serão repetidas e aquelas que serão fixas. Um correcto uso das divs ID e CLASSES reduziria consideravelmente o incremento da folha.

Criar seções correspondentes à cada área do projeto é uma das várias formas de simplificar o processo.

Muitos desenvolvedores optam por criar um índice - colocado no topo da folha de estilos - com todos os elementos da folha, para terem uma ideia geral de como ela está estruturada, algo parecido ao que se segue:

/*--------------------
INDICE
----------------------
BODY
+ Container: #container
+ Header: #header
    - Search box:#search-box
    - RSS box: #rss-box
+ Main content: #maincontent
+ Sidebar: #sidebar
+ Footer: #footer
-------------------*/

Esta forma de proceder não é de todo errado, aliás depende do objetivo a que o desenvolvedor se propôs atingir. Este procedimento seria útil para o caso de folhas de estilo muito estensas, mas com um senão: o índice deverá ser atualizado sempre que a folha for alterada.

A forma mais fácil seria criar as mesmas seções à medida que o conteúdo os elementos forem criados. Assim, não haverá necessidade de ir alterando a descrição da seção mesmo que haja atualização no conteúdo.

/* --------- */
/* CONTAINER */
/* --------- */
Aqui vao todos os elementos do container

/* ------ */
/* HEADER */
/* ------ */
Aqui vao todos os elementos do header

Desta forma, os elementos de cada seção ficam agrupados. Quando se precisar atualizar algum item, basta ir até a secção correspondente e alterar os valores conforme a necessidade. Não será preciso rever a folha toda.

Outra forma é agrupar logicamente todos os atributos de uma mesma seção e ordená-los alfabeticamente ou criar uma lista de atributos em cada seção usando tabulações para separar os valores dos atributos (veja em elegância do código):

#sidebar{
    Background:#e5e5e5;
    Float: left;
    Margin: 10px;
    Width: 300px;
}

Mas esta prática pode ser uma “faca de dois gumes”. A elegância do código acaba por ter influência na extenção do arquivo – os espaços brancos e as quebras de linha ocupam espaço. Alguns serviços de análize de velocidade de páginas de um site sugerem, por exemplo, que arquivos CSS e JS compactados reduzem o seu tamanho no servidor. E nesta situação, dá-se adeus à elegância do código.

Esta é apenas uma descrição de como podem ser criados arquivos que sejam fáceis de ler (humanamente falando) e, sobretudo, fáceis de manusear.

Elegância do código

A elegância na criação do arquivo CSS está associado ao que foi dito no último parágrafo da seção anterior. A idéia é facilitar no processo de criação para que seja facilitado o processo de manutenção. Criar o arquivo com a preocupação de serem deixados espaços brancos e com comentários bem detalhados, não haverá problemas em voltar ao mesmo e apagar ou acrescer algo, por mais que o arquvio seja extenso.

Usar identações, deixar linhas brancas, comentários para destacar as diversas áreas do CSS deixa o arquivo mais limpo e elegante tanto para quem o criou como para quem, porventura, for visualizá-lo no browser. Mas temos alguns casos a considerar, veja:

CASO A

.container{margin:0 auto;width:855px;}
#logo{background:url(/* ...URL image... */);height:60px;}
#navbar{background:#000000;height:30px;}

CASO B

/* ----------------------------*/
/* PAGE ELEMENTS */
/* ----------------------------*/
.container{
    margin:0 auto;
    width:855px;
}

/* ---------------------------*/
/* LOGO */
#logo{
    background:url(/* ...URL image... */);
    height:60px;
}
/* ---------------------------*/

/* NAVIGATION */
#navbar{
    background:#000000;
    height:30px;
}
/* ----------------------------*/

Os dois casos apresentam o mesmo código com a diferença de que no primeiro não houve a preocupação da elegância, o que tornaria o processo mais complicado para localizar os atributos.

Resumindo

Todo o processo até aqui descrito depende, única e exclusivamente, de quem vai implementá-los. Como referenciado, os projectos diferem um de outros pelas suas particularidades. No entanto, parar, pensar e projetar a estruturação da folha de estilos é meio caminho no desenvolvimento do projecto em si.

Devo salientar ainda que, todas as decisões têm o seu impacto, seja ele positivo ou negativo. A planificação de toda a ação pode ter sucesso ou não e o mesmo acontece no desenvolvimento web. Metodologia, simplicidade e boa estruturação podem fazer a diferença no processo de criação de aqruivos CSS padronizados e fáceis de serem manuseadas.

Esperamos que tenha sido útil este artigo e, embora não tenha cobrido na íntegra o assunto – por não sermos os detentores do saber – fica o desejo de nos vermos num próximo encontro.

Sobre o autor

Nelito Zangui

Este autor é um voluntário, que além de acompanhar o blog participa enviando conteúdos para serem publicados. Participe você também!

Comentários

Atualmente temos 2 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

Deixe seu comentário