por Diego Eis
Julho 11th, 2006
Se você faz sites grandes usando CSS, já deve ter notado que chega uma etapa do trabalho que se não prestar a atenção devida, podemos nos perder em mundo de propriedades, classes e ids. O CSS ajuda muito no desenvolvimento, isso é fato e ninguém duvida. Acontece que se você não tiver o mínimo de organização, pode ficar tão bagunçado quanto desenvolver sites usando tabelas.
Há uma maneira de organizar melhor seu CSS e deixá-lo organizado para que a manutenção seja rápida e transparente. Isso é possível quando modulamos o CSS.
Separando as seções
Os sites costumam ser dividos em vários pedaços. Um site simples, por exemplo, pode ser divido em 5 pedaços principais: Topo, Coluna da esquerda (onde normalmente vai um menu lateral), Coluna do meio (onde geralmente vai o conteúdo do site), Coluna da direita (publicidade, busca, etc) e Rodapé.
Você pode dividir seu CSS de acordo com este padrão. Ou seja, criar um arquivo CSS para cada pedaço do site, e depois importá-los em apenas um arquivo CSS principal, que será linkado na home.
No caso deste nosso sites simples, com 5 pedaços, você teria um arquivo CSS para o topo, onde você formataria tudo que pode estar no cabeçalho do site: Logo, menu, busca, data, etc… Outro CSS que formataria a coluna da esquerda, outro arquivo para coluna do meio, e assim por diante.
Você teria 5 arquivos CSS que conteriam a formatação de cada pedaço do site unicamente. Isso evitaria ter apenas um arquivo de CSS com centenas de linhas. Onde é um tanto custoso fazer alguma alteração. Separando seu CSS em pequenos módulos, você consegue ser mais rápido na hora de executar manutenções, porque você sabe onde exatamente encontrar a formatação de cada área do site. Se o problema é na lateral esquerda, você vai direto no arquivo responsável pela formatação da coluna da esquerda. Poupa trabalho de ficar procurando onde fazer a alteração.
Importando
Para importar todos os arquivos CSS em apenas um, usaremos o comando @import:
@import url(topo.css); /** CSS do cabecalho **/
@import url(colunaesquerda.css); /** Coluna da esquerda **/
@import url(conteudo.css); /** Conteúdo do site **/
@import url(colunadireita.css); /** Coluna da direita **/
@import url(rodape.css); /** Rodapé **/Os nomes que eu usei para os arquivos são apenas para explicação. Não é bom usar nomes tão específicos por falta de semântica. Isso é papo para outro post.
Você pode ainda ir mais além, e criar arquivos individuais para seções específicas do site, como por exemplo telas que usem formulários: Telas de cadastro, contatos, logins, etc.
Use o bom senso. Não exagere. Não adianta você criar dezenas de arquivos CSS, em vez de facilitar a vida, você vai piorar. Já vi muito desenvolvedor criar um arquivo CSS para formatar apenas duas ou três propriedades de um objeto. Isso é contraproducente. Não vale a pena criar um arquivo para tão pouco código.
Planejando
Um bom planejamento antes de começar a estrutura seu CSS é muito bem vindo. Analise o layout e defina as seções principais. Mapeie as páginas que terão formulários, elas costumam ser mais complicadas que o geral, é bom que elas tenham um arquivo CSS individual.
Crie uma pasta CSS onde você irá colocar toda a formatação do site. Nesta pasta se encontrarão apenas os arquivos CSS e a pasta de imagens que estes arquivos irão utilizar.
Não crie nomes complicados para os arquivos CSS. Tente manter a simplicidade e objetividade nos nomes para que não haja problemas posteriores de conflito. Já vi muita gente colocar nomes como: cabecalho_interna_sistema_logado.css
É muito fácil cometer erros com uma nomeclatura desta maneira. Seja sucinto na hora da escolha dos nomes.
Fazendo todo este planejamento, é simples de controlar toda a estrutura de formatação do site.
A maneira que eu apresentei aqui é muito básica. Você com certeza fará sites bem maiores e complexos do que nosso exemplo. Mas a idéia continua a mesma. Adapte esta técnica de acordo com as necessidades do projeto. Invente maneiras novas… lembre-se que padrões web vieram para libertar.
Se ainda estiver interessado, leia também:
Este post foi criado
na Terça-feira, Julho 11th, 2006 às 16:14 e está arquivado em Artigos, Geral.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Muito bom! Era isso que eu precisava. Algo semelhante a idéia de frames em que não é necessário ficar reproduzindo as divisões da página.
Valeu!
mais um artigo que vai ajuda muita gente…
parabéns Diego!
Boa dica.
Só não entendi qual o problema com os nomes 
Excelente Diego!
Se tivesse sido postado 3 dias atrás teria sido melhor ainda, pois agora mesmo estou fazendo uma atualização numa page e já estou perdido no meio de uma porrada de linhas de código.
Começa a fica cansativo depois de um tempo.
Mas agora já tenho a estratégia! Valeu!
Abraço!
Boa dica,
No meu blog é usado esse esquema, uso um css para o IE, outro para cores e outro para estrutura do site.
Valeu a dica!
Estou passando dificuldades com um maldito .CSS enorme, acho que essa será a solução para organizar as coisas. 
Comentando a resposta do Marin: A não ser que você copie e cole o nome do arquivo, acredito que seja dificil acertar o nome de um arquivo composto por mais de uma ou duas palavras separado por underline. Acredito q seja esse o problema com nomes grandes. Mas nada impede não é verdade. 
Muito obrigado!
Ah… fala mais sobre esse negócio dos nomes.
Interessante este post Diego. Importante para que os desenvolvedores não comecem a fazer a bagunça do “tempo das tabelas”.
O problema no nome dos arquivos, O’Marin e Michael, é que da forma citada eles fazem referência à posição da área selecionada de forma absoluta em relação ao layout. Mas bem se sabe que, com CSS, uma coluna ou área pode ser deslocada facilmente. O que está na esquerda hoje pode muito bem estar na direita amanhã.
T+
Boa dica Diego!
Eu nunca pensei nisso, mas eu usava um CSS normal e outro para o IE. Agora vou começar a separar melhor meu css pois eu encontrava esse problema mesmo, de ter um arquivo com centenas de linha e apesar de estar comentado era muito ruim mesmo.
Abraços
Aproveitando o post, que é muito importante ressaltar essa questão de planejamento do projeto web, gostaria de levantar a questao que os nomes compridos, complicam um pouco quando se tem por exemplo 10 arquivos css e todos respectivos a secoes de seu site (experiência própria)
Chegou um momento onde eu nao entendia mais nada.. e estava completamente perdido nos arquivos.
Recentemente vih um lance de que utilizar underlines na nomenclaturas de ids e classes dentro do css ocasionam em problemas de validacao. Is it true !?
Igualzinhos “nois faz” na programação
A modularização do código foi uma grande revolução na área da programação, nunca entendi porque isso não era usado com mais frequencia por quem desenvolve para web.
Tomara que seu artigo encorage mais pessoas a fazer isto.
Abraço
só uma dúvida, esse “@import” vai no css ou no (x)html ?
Eu geralmente costumo criar um css para o layout, e para as paginas que precisam de uma estilização mais própria, eu crio um css separado (como no caso de formulários de contato).
Mas esse @import é algo que pode ser muito útil sim !
Valeu!
Muito bom post… finalmente um artigo de dicas…. hehehe… mas… muito bom!
Gostei muito do texto. Simples direto e realmente eficiente. Vai me ajudar e com certeza vai ajudar muita gente por aí!
Abraços
Bacana o artigo, mas qual seria a sugestão para não incurtirmos no erro de redefinir uma propriedade. Por exemplo, se formato a tag P no cabeçalho e no rodapé por engano, formato com outros padrões, achar onde foi aconteceu o erro é brabo.
Seria uma solução usarmos hierarquia de objetos? Tipo, só redefinir a tag P dentro da div#rodape?
Taí uma sugestão para um outro post: como simplificar tudo o que podemos complicar.
Grande abraço.
MAIS UMA DICA:
Muito interessante a lógica de desfragmentação do CSS em arquivos correspondentes aos frames do site.
Em muitos casos é uma ótima solução, e já usufruí muito dela… Porém, muitas vezes a maior concentração de código pode se encontrar em um único frame, o do conteúdo por exemplo.
Imagine um site separado em 4 arquivos css:
Geral, Topo, Menu e Conteudo, sendo que, os arquivos: Geral, Topo e Menu contenham poucas linhas, e o arquivo Conteúdo seja Monstruoso!
Uma das soluções simples que eu encontrei foi a divisão do css em “etapas” do site…
como por exemplo:
geral.css -> onde vem Menu Topo Rodape…
index.css -> apenas conteúdo da index…
interna.css -> apenas conteúdo das paginas internas..
______________________
E sobre o comentário do Mederinho aqui em baixo… é sempre uma boa hierarquizar com Div’s, mas já vi mt css onde as hieraquizações são desnecessárias, como por exemplo: especificar que tais atributos se trata da tag P dentro da Table X dentro da Div Y etc etc etc… aí é só ter bom senso!
abraço a todos!
Muito bom o artigo, gostei muito.
Parabéns Diego.
Seria uma boa você falar mais em um novo post sobre aquilo que comentou:
“Os nomes que eu usei para os arquivos são apenas para explicação. Não é bom usar nomes tão específicos por falta de semântica. Isso é papo para outro post.”
De certa forma, entendo o que talvez queira dizer. Mas para ficar melhor, só você explicando seu ponto de vista. =D
Meu caso é pouco parecido com o do amigo felipe tonello.
Vou começar a editar alguns “brinquedos” meus de casa. =D
Até mais,
abraços!
Particularmente eu prefiro o xhtml com apenas um css. A modularização se dá pelo lado do servidor, de acordo com a requisição, por exemplo:
Configuro o apache para encaminhar a requisição para um arquivo (css.php). De acordo com o arquivo solicitado, ele faz os includes necessários. No final, o “arquivão” pode se aproveitar da comprssão gzip.
Resultado:
a. apenas 1 requisição
b. compressão no arquivo
c. headers de expiração
Na verdade tudo isto é “achismo”. Ainda preciso testar se isto é o que realmente acontece.
Viajando um pouco mais neste assunto, temos:
CSS Server-Side
http://www.shauninman.com/plete/2005/08/css-constants
CSS Server-Side Variables
http://www.shauninman.com/plete/2005/08/css-variables
Esqueci de dizer que usando o php (asp, jsp etc) para gerar o CSS, é possível ainda gerar um css para cada tipo de browser.
No lado servidor tudo organizado, separado por diretórios. No lado cliente (navegador), tudo em um único arquivo.
Parabéns pelo post Diego,
Outra questão é a diferença entre a Home do site e as páginas internas ( geralmente mudam alguns posicionamentos do conteúdo ).
pode-se fazer por exemplo os css para home e para páginas internas:
Home………………………
topo.css
menuprincipal.css
conteudo.css
rodape.css
Páginas internas…………………..
topointerno.css
menuprininterno.css
conteudointerno.css
rodapeinterno.css
Daí vem a seguinte pergunta:
e os intens que não mudam com relação a home?
por exemplo o rodapé geralmente permanece o mesmo em todo o site então por qual motivo criar um arquivo rodapeinterno.css com as mesmo código do rodape.css
Uma sugestão que vejo é a possibilidade de adicionar nomes descritivos no nome do css. Ex:
já que o rodapé não modifica pode-se usar o seguinte nome:
rodapecomum.css ( pois ele é comum a todas as páginas)
esse arquivo rodapecomum.css seria importado tanto na página principal como nas internas.
e as demais páginas que houvessem modificações seguiriam o padrão anterior de topo.css (home) topointerno.css (páginas internas)
Terminando isso, o que falta ser feito são as formatações de páginas mais específicas como as de fomulário.
Bom, mostrei algumas sugestões e gostaria de saber a opinião de vocês, validando ou mostrando os pontos falhos. Faz tempo que estou tentando criar um padrão de organização dos arquivos para tornar a manutenção mais intuitiva e esse post do Diego serviu muito para eu tirar idéias e tentar otimizá-las.
Abraço a todos.
gostei, eu tava procurando algo assim…
muito bom
Artigo bom..
E separar em varios css fica bom, uma coisa interresante também de ser fazer seria separar a formatação basica da formatação de imagens, cores e fontes.
Tipo ter um css para a estrutura onde ficaria so o basico como os padding, width,height etc e um outro aonde ficaria as fontes e cores assim caso fosse alterar a cor do site não precisa mexer em um arquivo muito grande e pode fazer ate skins ou cores diferentes sem mexer na base.
flws.
Ótima dica Diego.
Um bom planejamento com certeza pode definir o rumo do projeto, por mais simples que este possa parecer.
Abraços!
Interessante mesmo. Eu já fazia isso, mas separava apenas a parte de conteúdo da parte estrutural do site.
Quanto mais separado melhor!
Olá pessoal,
Só quero fazer um adendo. Sei que é bem legal o uso de @import mas não é o mais apropriado, é melhor que vocês façam mais de um e modularizem do mesmo jeito, pois assim terão a garanti de funcionamento em um maior número de browsers.
Abraços
[…] Ao me lembrar de dois artigos que li nos últimos dias (Evitando caching quando (e só quando) o arquivo CSS for atualizado e CSS Modular - Breve explicação), me veio uma idéia interessante que poderia resolver meu problema. […]
Olá!!
Estive lendo a matéria
[ Sobre nome e sobrenomes ] e
pude perceber que o mesmo ensina
a “semâtica” de arquivos e variaveis.
Só que ao ler essa matéria de - CSS Modular - link dentro da matéria
[ Sobre nome e sobrenomes ]
pude perceber que usa a seguinte estrutura de arquivos;
@import url(colunaesquerda.css);
@import url(colunadireita.css);
Não seria interessante ter um controle das
matérias para que o assunto, não se dispersse entre uma e outra!!!
” O FAMOSO SALVA VIDAS ! ”
vlw pela dika …..
Só vi esse artigo hoje, mas já me auxiliou muito no meu trabalho.
Parabéns e muito obrigado!
Abraços.
Rodrigo.
Muito bom esse artigo, vai me ajudar muito
parabéns!!
abraços
[…] Remembering to post i read in the last few days (Avoiding caching when (and only when) the CSS file is updated (Portuguese Post) and Modular CSS - Small explanation (Portuguese Post)), came to me an interesting idea that could solve my problem. […]
Boa dica, organização e fluxo de trabalho é realmente muito importante nos dias de hoje..
vlww
Anderson
http://www.desiner.com.br
Oi!
Seu nome é Diego certo?
Gostei muito do teu site, interessante mesmo. São “5mãos na roda”!!rs..
Olha só, estou fazendo minha monografia este semestre, me formo em Design Gráfico, e gostaria de saber se vc ja publicou algum material aqui sobre “Programação Visual na Web”.Estou com um pouco de dificuldade em achar materiais com imagens sabe, eu gostaria de fazer um comparativo de como eram os sites logo que começaram a ser lançados com os de hoje.
Ou quem sabe voce poderia me dar alguma dica sobre isto, hehe
Estou aguardando ansiosa sua resposta!
Abraço!
legal esta pensando em uma boa solução pra isso esses dias, apesar de eu sempre ir procurar meus estilos na tag é dificil se habituar ao import().
Agora estou pensando na melhor forma para orgnizar os arquivos 
uma coisa importante, cuidado com a sintaxe do import() , dependendo como você escreve ele pode ser ignorado por alguns browsers….
http://imfo.ru/csstest/css_hacks/import.php