Um arquivo CSS ou CSS arquivos individuais para cada página?

Question

Quando eu estou construindo páginas, eu gostaria de ter folhas de estilo individuais para cada página ou um grande estilo para todo o site? Para fins de carga, seria arquivos não individuais ser uma prática melhor porque seria css menos o total da carga?

Answer 1

Use um único arquivo, arquivos CSS são armazenados em cache e, portanto, reduzir a necessidade de baixar um novo arquivo para cada nova página visitada.

Para ajudar, eu costumo bater no meu CSS através de uma CSS mais limpo para reduzir o tamanho do arquivo, além disso você pode GZip CSS usando .htaccess também, torná-lo menor, mais uma vez.

Finalmente colocando toda CSS em um único arquivo vai fazer faça todo o sistema muda para apresentação mais fácil no futuro (toda a razão que nós usamos CSS em primeiro lugar), que também irá fazer a depuração mais fácil.

Editar, maio 2017

Muita coisa mudou em 7 + anos, e qualquer pessoa olhando para esta resposta deve considerar pesquisando métodos de entrega de ativos mais recentes, especialmente agora usar de HTTP2 e pré-processadores são mais comuns.

Answer 2

Uma sugestão diferente, use várias folhas de estilo durante o desenvolvimento e têm um mecanismo que irá mesclar todas as folhas de estilo em um arquivo CSS único para implantação de produção. Isso pode exigir algum pouco de codificação extra e alguns scripts extra para ser executado antes da implantação de produção, mas seria ideal tanto para uso desenvolvimento e uso em produção. Se o processo for adequadamente automatizado (que não é muito difícil de conseguir) isto não irá causar qualquer tipo de erros também.

Answer 3

O principal objetivo da folha de estilo é para que você possa alterar o projeto em todas as suas páginas. Se você tem h1 {color:red;} em cada página e mais tarde quiser mudar para azul, você teria que editar folha de estilo de cada página. Com uma folha de estilo que você seria capaz de mudar a cor e têm que refletia sobre todo o site.

Além disso, a folha de estilo será armazenada no computador do usuário, em vez de baixados da cada página.

Answer 4

Se você quer ter um estilo consistente em todas as páginas em seu site, use um estilo para todos os estilos comuns. Caso contrário, você pode achar que é muito difícil manter muitas folhas de estilo. Mudanças teriam que ser adicionado a cada uma das várias folhas de estilo.

Stylesheets que são usados ??somente em uma única página poderia ir em folhas de estilo separadas. Isso pode ser mais útil para grandes folhas de estilo de uma única página e / ou folhas de estilo para páginas da web raramente acessados.

As suas folhas de estilo não será recarregado em cada atualização da página. Se você faz referência a grande, estilo de uso geral em sua home page, ele só irá ser baixado uma vez, e em cache para uso futuro.

Answer 5

"Para fins de carregamento, você não iria querer uma folha de estilo menor, os mesmos que fazem as individuais é uma prática melhor?"

Isso pode ter um efeito inverso, como a utilização de uma folha de estilo que pode ser armazenado em cache e, em seguida, re-carregado com facilidade, enquanto ele é constantemente carregar um novo arquivo CSS para cada página com seu método.

A maioria dos sites não precisa ter mais do que uma folha de estilo para um tipo de mídia. No entanto, se o seu site varia drasticamente em design gostaria de sugerir ter uma folha de estilo base que tem todas as propriedades comuns, e depois uma folha de estilo secundário para cada uma das páginas que contém as diferenças.

Esta só deve ser usado se as mudanças de estilo CSS são grandes o suficiente em tamanho para justificar o uso de folhas de estilo separadas.

Answer 6

Desde que eu sou realmente um programador web real (material de programação web de Java, não scripting como PHP) Eu tenho que lhe dar uma opinião Eu nunca vi qualquer web real Designer give:

Por favor, vá em frente e dividir seus arquivos CSS para múltiplas partições lógicas sempre que possível! Se você tem uma tabela extremamente estilizado, recolher seu material CSS para um arquivo, também recolher os stylings base da página actual para outro arquivo, adicione as menu de navegação CSS: é a terceira e assim por diante e assim por diante. Pode, claro, reutilização CSS individual:! É onde eles são relevantes, mas NÃO apenas empinar tudo em um grande arquivo

Answer 7

me deparei com esta discussão buscando a mesma pergunta .. Meu pensamento foi o de estrutura como esta ..

layout.css <--- para a estrutura do site, links, títulos, etc, que são comuns em todo o site. form.css <- estilos forma genérica reset.css <- todas as redefinições de documentos se você usá-los

e atualmente eu uso pages.css para todos os estilos de página ..

ou

homepage.css about.css gallery.css