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

19

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.

css responsive-webdesign css3 media-queries CamSpy
fonte
O grunt / webpack / qualquer plug-in existe para pegar um único arquivo css e dividi-lo em vários arquivos separados por consulta de mídia? Então você pode obter a facilidade de desenvolvimento oferecida por um arquivo monolítico e também a otimização da velocidade de arquivos separados.
Kevin Wheeler

Respostas:

16

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

Richard B
fonte
Nesse post que você vinculou, você sabe o que ele quer dizer com "isso é uma limitação do CSSOM"?
usar o seguinte
1
O CSS Object Model - dev.w3.org/csswg/cssom - acredito que isso define como o CSS deve ser tratado e, portanto, acho que a limitação a que ele se refere não será ter um modelo que lide com esses estilos com mais economia de largura de banda caminho.
Richard B
3
Embora não seja um protetor de download, é de certa forma. Um navegador priorizará links de consultas de mídia correspondentes em vez de não correspondentes. Um arquivo css correspondente bloqueará a renderização da página, enquanto uma não correspondente obtém uma prioridade mais baixa do navegador para fazer o download e não bloqueia a renderização da página. Além disso, uma vez dividido, você pode usar o js para fazer o download condicional, se desejar salvar e largura de banda.
dalore
4

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.

royarisse
fonte
1
Classes nomeadas após o estilo são más formas. É melhor colocar apenas um atributo de estilo se você estiver indo para isso. Melhor nomear as classes lógicas. Como.important
dalore 30/07/2015
4

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.

Jost
fonte
3
Vale a pena notar que, se você estiver usando a <link rel="stylesheet" />tag para todos os seus arquivos específicos de consulta de mídia, não poderá impedir o download do navegador. Você precisaria usar o sniffing do navegador no lado do servidor ou o JavaScript para examinar as dimensões da viewport e injetar as folhas de estilo apropriadas. Nenhuma dessas são boas escolhas.
Cimmanon 21/07
1
Estou um pouco surpreso, mas você está certo - pensei que adicionar o atributo media à <link>tag-teria impedido o carregamento de folhas de estilo não correspondentes. Por que os navegadores fazem isso? É claro que esse é o motivo mais importante para não dividir as folhas de estilo.
Jost
Eles fazem isso porque sua tela pode mudar, e se você estiver em um celular e o girar de retrato para paisagem, de repente a largura da tela é diferente. Ou na área de trabalho, você pode redimensionar a janela do navegador ou arrastar a janela para outra tela, se tiver uma configuração de vários monitores. Se o navegador não baixasse todos os recursos de CSS com antecedência, haveria um atraso na nova renderização da página se e quando alguma das ações acima ocorrer
MrCarrot 4/15/15
É melhor tê-los separados. Atualmente, a maioria dos navegadores são spdy (seu site é https e spdy exatamente como deveria ser) e, com o spdy, várias conexões são multiplexadas na mesma conexão, para que o número de arquivos não importe agora. Além disso, os navegadores colocarão arquivos css de consultas de mídia sem correspondência com uma prioridade mais baixa para baixar e, o mais importante, não BLOCARão a renderização da página.
dalore
3

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.

jsninja
fonte
Ouvi dizer que, se você realmente não deseja que seus scripts assíncronos atrasem a renderização, execute-os no evento window.onload em vez de usar async.
Kevin Wheeler
2

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.

Algy Taylor
fonte
1

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.

Regardt Ogies Myburgh
fonte
-1

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.

Regardt Ogies Myburgh
fonte
2
Ele já escreveu 30kb de CSS, como poderia ser benéfico mudar para o bootstrap?
21814 Steve Sanders
Colocando dessa maneira, sim, eu concordo que 30kb de css é uma missão para refazer. Eu simplesmente copiava e colava em diferentes folhas de estilo, tudo dependendo de como está estruturado, você pode duplicar e renomear os arquivos css e remover todas as partes desnecessárias.
Regardt Ogies Myburgh