Devo dividir um arquivo grande de consultas de mídia CSS em arquivos separados para cada tamanho de tela?

Estou trabalhando em um site de design responsivo para fornecer conteúdo para todos os tamanhos de tela. Tenho consultas de mídia para 5 "etapas" diferentes e o arquivo CSS tem cerca de 30 Kb.

Seria melhor dividir isso em arquivos separados e torná-los semelhantes a este:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

ou devo mantê-los em um arquivo CSS?

Atualização: Eu só queria acrescentar que minha principal preocupação era a velocidade de abertura / renderização de páginas entre navegadores / dispositivos / dispositivos, e não a facilidade de desenvolvimento.

Acho que realmente depende do que você acha mais fácil para o desenvolvimento e do que ajuda a manter uma folha de estilo organizada.

A única desvantagem real que posso pensar na divisão seria que, se o atributo de um elemento aparecer em todas as suas folhas de estilo, você precisará atualizar 5 arquivos separados para alterá-lo (em vez de aparecer lado a lado em um só lugar).

De acordo com a resposta nesta postagem, os navegadores farão o download de todas as folhas de estilo, portanto, dividir a resolução não economiza largura de banda: /programming/16657159/when-using-media-queries-does-a -carga-de-telefone-consultas-e-imagens-não-relevantes

Depende um pouco do que você deseja alcançar: você está tentando acelerar o carregamento da página ou o desenvolvimento mais fácil?

Se você segmentar o último, poderá usar várias folhas, mas isso é tudo uma questão de preferência. Acho mais fácil usar um arquivo grande, pois isso fornece uma visão geral de todos os estilos que você declarou.

Se você deseja uma página de carregamento mais rápida do que sua melhor aposta seria minimizar a quantidade de solicitações, pois a sobrecarga de solicitações é muito grande. Além disso, você pode manter uma versão de desenvolvimento para si mesmo e fornecer um css minimizado para a web (acho o YUI um bom método: http://www.refresh-sf.com/yui/ ).

Além disso, eu tentaria otimizar o próprio CSS. Você pode tentar mesclar classes muito semelhantes, por exemplo:

.bold-and-italic { font-weight: bold; text-style: italic; }

Pode ser convertido em:

.bold { font-weight: bold; }
.italic { text-style: italic; }

A única coisa é que você precisa alterar um pouco o html de <span class="bold-and-italic">foo bar</span>para<span class="bold italic">foo bar</span>

Posso sugerir que você dê uma olhada no Bootstrap ( http://getbootstrap.com ), esses caras fizeram um ótimo trabalho em dividir as classes em várias 'subclasses'.

Eu espero que isso ajude.

Provavelmente é melhor ter apenas um arquivo CSS, mas reduzi-lo e compactá-lo. Supondo que seus 30 KB sejam antes de fazer isso, você provavelmente reduzirá o tamanho do arquivo para cerca de 5 KB com minificação (remoção de espaço em branco) e gzipping.

Dividir provavelmente vai te dar mais velocidade, mas apenas sob algumas condições.

• Você precisaria garantir que apenas uma folha de estilo fosse carregada a cada vez - caso contrário, você precisaria de duas ou mais solicitações HTTP, que têm uma sobrecarga, o que negaria parcialmente o ganho do tamanho menor do arquivo. Para fazer isso, não basta dividir a folha de estilo e inserir várias <link>tags com diferentes atributos de mídia. Os navegadores parecem carregar todas as <link>folhas de estilo editadas, independentemente das consultas da mídia (graças a @cimmanon por esta informação, você não sabia disso) .
• O número de regras CSS compartilhadas entre as folhas de estilo deve ser pequeno - caso contrário, cada uma das várias folhas de estilo precisaria conter todas as regras comuns e, portanto, teria quase o tamanho da original.
• Você usa um pré-processador CSS (ou algo semelhante), portanto, é possível ter as mesmas partes de código em 5 folhas de estilo.

Além disso: não otimize prematuramente. Faça isso apenas se você tiver problemas de desempenho.

Você deve dividir seus arquivos CSS com base em consultas de mídia, porque os arquivos CSS estão bloqueando a renderização.

Quando o navegador está construindo seu DOM, ele deve primeiro esperar e carregar todos os seus arquivos CSS. Você reduzirá o tempo de carregamento da página se alguns de seus arquivos CSS forem carregados apenas com base em determinadas consultas de mídia.

Isso também vale para adicionar assíncrono a uma tag de script JavaScript; ex <script src='myfile.js' async></script>. : .

O DOM não precisa aguardar o carregamento do seu arquivo JS. Adicione apenas assíncrono se a construção do seu DOM não precisar desse JavaScript durante a carga.

Eu estaria inclinado a dizer isso.

Para produção, mantenha-os sempre em um arquivo; a razão é que é mais eficiente para o navegador e esse deve ser seu principal interesse (IMO) ao passar do desenvolvimento para a produção.

O desenvolvimento é uma chaleira diferente de peixe. Costumo dividir as consultas de mídia para que elas sejam por qualquer elemento, por exemplo:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Como geralmente, se estou alterando um elemento, não quero ter que procurar em todo o lugar o CSS (embora você possa usar algo como grep ...).

Mas , uma coisa que eu diria é que vale a pena considerar o site em si, o processo de desenvolvimento e o software. Se você realmente acha que vale a pena separá-los em arquivos com base no tamanho da tela, experimente. Faça uma cópia do site (se possível), brinque com a cópia - se facilitar, use-a. Você não precisa seguir um paradigma único de como desenvolver um site.

Simples: use 1 folha de estilo e adicione comentários a eles para facilitar a localização e alteração dos estilos CSS, por exemplo:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Se desejar, você pode usar várias folhas de estilo e chamá-las para cada tamanho específico.

Prefiro olhar para o Bootstrap . É um arquivo CSS que contém todo o CSS. Ele funciona em quase 99% dos navegadores e é extremamente responsivo.

Clique na demonstração ao vivo para aumentar o zoom ( Ctrl += aumentar o zoom, Ctrl -= diminuir o zoom, Ctrl 0= normal) ou abra-o no seu celular para ver como é renderizado.