Sepre que pego portais, eu separo meu código CSS, faço um geral e puxo os outros arquivos CSSs.

Isso ajuda muito na manutenção.

Dessa maneira como é possível puxar somente os CSS’s que a página necessita??

Ex: tenho uma Home, contato e conteúdo mas a home não precisa puxar os css’s do conteúdo e contato.

[...]Por isso, há uma segunda opção que é conversar com seu programador para que ele faça uma mágica onde o site carregue apenas o arquivo CSS relativo àquela página. Quando visitamos a página interna, não é necessário carregar o arquivo CSS da HOME, por exemplo. Essa mágica previniria isso.[...]
[quote]Quote funfa aqui?[/quote]

Não entendi muito bem, essa magica carregaria apenas alguns dos css contido no css geral, que contem todos os imports?

Eu, sempre que posso, quebro o CSS em vários arquivos.
O único inconveniente mesmo com essa técnica é que quanto mais requests são feitos, mais lento fica o carregamento da página (vi um post certa vez que falava disso, para evitar ter um número excessivo de includes e afins uma vez que o browser “perde” um bom tempo para abrir um request, processá-lo e depois fechar).

Diego, eu costumo modularizar o css. Mas geralmente, via php ou outra linguagem server-side, junto tudo (todos os módulos necessários) num arquivo só com includes, e o html acaba chamando um arquivo só. Aparentemente, apresenta ganho no desempenho. O que acha?

A modularização é MUITO importante!

Esse tipo de coisa só se aprende quando realmente precisa… Com o passar do tempo a necessidade de organização faz com que você tenha que modularizar seus códigos.

O interessante é que, dependendo do tamanho, o recomendado é dividir em vários arquivos mesmo.

É fato que separo meus CSSs dependendo das mídias, caso necessário. Mas em grandes portais, geralmente faço um “CSS geral”, que engloba todas as definições de classes e elementos a serem utilizados em todo o site.

Em seguida faço o CSS das páginas internas, aí sim com as regras bem específicas, mas abusando de comentários para separar tudo certinho, não separando em milhões de arquivos distintos heheh

E, claro, há um CSS que serve como índice dos outros arquivos, indicando o que cada CSS engloba, e por aí vai… Acho essa parte da organização bem interessante e cada um acaba inventando o jeito que mais se adequa a suas necessidades.

Faço como o Jason. Tenho um css “main” e o resto é feito para cada módulo, então tenho um php que pega todos os CSSs – main + módulo – e junta num único arquivo, assim sirvo um único CSS e gzipado.

Veho fazendo isso há algum tempo! Tem funcionado bem! Belo artigo!

Olá pessoal, vou contar meu caso pra vocês.

Todos os projetos que desenvolvemos seguem exatamente o mesmo padrão para todas as telas. Nesse sentido, organizamos da seguinte forma:

layout.css – para a estrutura da página, como cabeçalho, menu, corpo, barra de ferramentas, áreas de mensagens e rodapé.

tabela.css – para as diferentes tabelas (geralmente 3, no máximo)

formulário.css – para os elementos de formulario

links.css – para os diferentes links

menu.css – para os menus local, global e contextual

nav-abas.css – para o ficheiro ou navegação por abas (geralmente usamos dois tipos)

impressao.css – para as definições de impressão das páginas.

Estrutura de pastas dos projetos:

/css/
/img/
/js/
/html/
/html/caso-de-uso/
/html/etc/

Caso exista a necessidade de criar algum estilo específico, este deverá ser inserido na pasta do caso de uso específico. Se for algo genérico, deverá ser inserido em uma das folhas de estilos padrão (já existentes).

Obs.:

1. As chamadas das folhas de estilo não aumentaram o tempo de carregamento das páginas.

2. 1150 é o número total de linhas do código CSS. Com a separação, teve arquivo que ficou com 280 linhas, outros com 150, outros com 50 e por ai vai.

3. Todos os projetos rodam tranquilamente no Firefox, Opera, IE6 e 7 e Safari para windows.

4. Estamos revisando e buscando melhorar a estrutura dos códigos.

5. Os ‘hacks’ se reduziram a pequenos ajustes de margins e paddings. O pior já passou!

6. Escrevemos em ordem alfabética (considerem a identação), ex:

corpo {
background
border
clear
color
float
font
margin
padding
width
…
}

7. usamos o css reset:

* {
border
margin
padding
}

Já melhoramos bastante a organização dos projetos e o que é melhor: usamos o mesmo código para atender projetos de clientes diferentes com a nomenclatura padrão, ex:
resolucao {}
topo {}
menu-global {}
menu-local {}
corpo {}
area-mensagens {}
barra-ferramentas {}
caminho-navegacao {}
dados-login {}
table-grid {}
table-detalhar {}
form-text {}
form-select {}
form-textarea {}
form-barra-botoes
link-paginacao {}
link-conteudo {}
rodape {}

e por ai vai… é muito bacana padronizar. reutilizamos praticamente tudo.

Aquele abraço.

Normalmente, quando faço estilos iguais para todas as páginas, crio uma folha de estilos apenas com as TAGs, e chamando outras duas, uma com as classes e outra com os IDs.
Quando tenho páginas com estilos diferentes, opto por fazer com que se carregue apenas a determinada folha de estilos que necessito, e essa escolha de arquivo é feita diretamente pela programação, com a “mágica”, segundo o Diego.

Realmente muito bom! Modular o CSS era uma coisa que eu pensava em fazer a muito tempo, mas não encontrei um padrão (também não gastei tempo procurando, heheheh).

Não uso nenhum método idêntico aos apresentados para modularização, mas trabalho com reset, grid e style, 3 arquivos css e outros plugins básicos do jQuery em um pacote (quase um framework) que e chamo de “Genesi”.

Muito bom o artigo. Já modularizei várias vezes, mas não exatamente dessa forma. Era parecido.

Apesar de saber e utilizar isso, é sempre bom reforçar algumas dicas.

Vivendo e aprendendo.

Ótimo post.