Desde que comecei a fazer templates para websites, venho procurando criar dois layouts distintos entre a home page e as páginas secundárias. Faço isso para mudar o “ambiente” em que o usuário se encontra, para que ele possa notar a diferença de contexto entre a apresentação resumida do site que é feita pela home page, e a apresentação de conteúdo único que a página secundária deve fazer.
Às vezes a página secundária do site é uma mera variação da página inicial, principalmente com alterações de proporções, números de colunas, às vezes mudando o tamanho do cabeçalho e das fontes da coluna de conteúdo. Para isso então, adotei a rotina de sempre gerar um arquivo CSS para a página inicial, e então pegar o HTML dela, alterar para formar a secundária, e aí criar um CSS separado para a página secundária.
Basicamente, ambos os HTML utilizavam as mesmas tags e classes, mas seus respectivos CSS variavam. Isso funciona muito bem, não há porque não funcionar. E então continuei projetando os templates desta forma.
Um dia, porém, resolvi fazer meu próprio site – este mesmo – e descobri que os templates padrão do Wordpress, apesar de possuirem diversos diferentes arquivos, um para cada tipo de página (mantendo normalmente o cabeçalho e o rodapé), possuem apenas um arquivo CSS que estiliza todos eles. Foi trabalhando com este arquivo CSS enquanto construía meu próprio template, que descobri a vantagem de fazer templates assim. Vou explicar.
Mesmo quando fazia templates com variação entre a página inicial e as secundárias, muitos, na verdade a grande maioria dos estilos das tags, ids e classes se mantinham os mesmos, invariáveis entre uma folha de estilos e a outra. Isso gerava uma dor-de-cabeça sem tamanho quando eu resolvia alterar os estilos comuns entre os dois, pois cada alteração em um deveria ser repetida no outro, para continuarem iguais. Suponho que haja softwares que façam isso automaticamente, mas resolver o problema desta forma me parece muito paliativo.
O que fiz então? Passei a adotar o estilo Wordpress de estilizar seus templates. Em vez de usar apenas uma lista de classes comuns a ambas as páginas (principal e secundária), e assim depender de duas folhas de estilo distintas, passei então usar classes e ids diferentes para cada página, adicionando-as então a um mesmo arquivo CSS. Assim estilizo cada classe separadamente e mantenho os estilos comuns às duas páginas inalterados. Veja os exemplos de código abaixo:
<!-- PÁGINA PRINCIPAL --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="estilo.css" /> <title>Página Secundária</title> </head> <body> <div id="wrapper"> <div id="conteudo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div id="coluna"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div id="rodape"> </div> </div> </body> </html>
Assim deverá ficar a página inicial
<!-- PÁGINA SECUNDÁRIA --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="estilo.css" /> <title>Página Secundária</title> </head> <body> <div id="wrapper_secundaria"> <div id="conteudo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div id="coluna"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div id="rodape"> </div> </div> </body> </html>
Assim deve ficar a página secundária. Note a diferença entre a cor do background e o tamanho e família da fonte do texto da coluna esquerda.
Note que a única diferença de estrutura entre os dois documentos é que o wrapper da página inicial tem id #wrapper, enquanto o da página secundária tem id #wrapper_secundaria. Desta forma, aproveitando a propriedade de cascata do CSS, eu não preciso fazer nenhuma alteração no “#conteudo” e “#coluna”, nem preciso criar novos ids para essas divs. As propriedades delas já existem no CSS. Se eu quiser criar uma exceção para a página secundária, como por exemplo, mudar a cor de fundo da div “#conteudo”, não preciso reescrever toda a classe só para alterar o background. Basta adicionar, abaixo do seletor #conteudo, o seletor “#wrapper_secundaria #conteudo” e alterar a cor apenas para este seletor. Ele vai aproveitar todas as características do id #conteudo e vai sobreescrever o background com o atributo do #wrapper_secundaria #conteudo.
Se eu quiser que a tag <p> fique com a fonte Times New Roman e tamanho 16px em todas as páginas, basta mudar a propriedade no seletor “p”. Mas se eu quiser que ela mude apenas na div #conteudo da página secundária, eu criaria o seletor “#wrapper_secundaria #conteudo p“, só para essa alteração. Não preciso mais ficar gerenciando dois arquivos e verificando se as classes comuns de ambos realmente estão com os mesmos estilos. Veja abaixo o código único e enxuto para as duas páginas.
/* CSS COMUM A TODAS AS PÁGINAS */
body {
background:#444;
width:100%;
}
p { /* Vai afetar todos os 'p' de todas as páginas */
font-family:Arial;
font-size:14px;
}
#wrapper_secundaria #conteudo p { /* Vai afetar SOMENTE os 'p' da coluna #conteudo da página secundária. Como possui valores diferentes para propriedades do 'p' acima, vai sobreescrevê-los */
font-family:"Times New Roman";
font-size:16px;
}
#wrapper, #wrapper_secundaria { /* Determina que os wrappers de ambas as páginas são iguais */
width:80%;
background:#999;
margin:0 auto;
padding:20px;
}
#conteudo { /* Vai afetar as div #conteudo de todas as páginas */
float:left;
width:60%;
background:#DDD;
margin-bottom:10px;
}
#wrapper_secundaria #conteudo { /* Vai afetar SOMENTE a div #conteudo da página secundária, sobreescrevendo o background. */
background:pink;
}
#coluna {
float:right;
width:30%;
background:#FFF;
margin-bottom:10px;
}
#rodape {
clear:both;
width:100%;
height:30px;
background:#111;
}
EDIT: Faça o download dos arquivos com estes códigos para estudá-los: Exemplo CSS Único para Template com Múltiplas Páginas – Leonardo Baptista Lopes (arquivo .rar)
Algumas pessoas, tentando resolver o mesmo problema, passam a adotar outra forma de trabalho. Criam um arquivo CSS apenas para os seletores comuns a todas as páginas, outro arquivo CSS apenas para os seletores da página inicial, e outro arquivo CSS apenas para os seletores da página secundária. Isso evita que os seletores comuns variem de um arquivo pro outro, mas pense bem, agora, em vez de gerenciar dois arquivos, seriam TRÊS arquivos a abrir e editar, e haveria o constante trabalho de determinar se um seletor é comum ou específico, e só depois de determinar isso você colocaria o bendito seletor no arquivo correto. Da forma como eu trabalho, isso me traria mais prejuízo do que benefício.
Se ficaram dúvidas sobre isso, podem mandar um comentário ou uma mensagem que eu vou tentar tirar a dúvida. Se não entendeu bulhufas, estude CSS e Webstandards. Vai te fazer muito bem 
Tags: CSS, Tableless, Web, Webstandards
email/gtalk: 
skype: neovalk
twitter: