clipped from: www.tableless.com.br Os sites costumam ser dividos por vários pedaços. Um site simples, por exemplo, pode ser divido por 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ê 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.
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é **/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.