Escopo de animações CSS para consultas de mídia

Ao programar as reformulações do meu blog, penso e projeto o site em etapas de largura do dispositivo, na seguinte ordem:

• Desktop: todos os estilos gerais, nenhum envolvido em uma consulta de mídia
• Tablet: consulta de mídia, larguras de tablet mais ou menos populares
• Telefone: consulta de mídia, qualquer largura abaixo da largura do tablet
• Imprimir: consulta de mídia, principalmente um monte display: none

Como meu foco é o desktop e essa plataforma é a mais avançada, geralmente acabo adicionando propriedades de animação e transição CSS aos seletores globais. Embora isso funcione, um comentário sobre Animações CSS entre consultas de mídia me fez pensar o contrário:

Por motivos de desempenho, costumo fazer exatamente o oposto: escopo css de animação de modo que as transições só se apliquem a larguras maiores…

Ele está certo: definir o escopo das animações e transições do CSS para a área de trabalho, em vez de remover essas propriedades em larguras menores, é mais fácil de manter e tem que ter mais desempenho. Portanto, veja como fazer isso:

.logo {
	width: 200px;
	height: 100px;
	display: block;
}

@media (min-width: 1024px) {
	/* Only do logo animation on desktop, otherwise don't bother */
	.logo {
		opacity: 0;
		transition: opacity 1s;
	}
	.logo.loaded {
		opacity: 1;
	}
}

O código não é impressionante, mas a ideia é ótima, e não é algo que eu tenha usado no passado. Todos nós pensamos em fazer com que nossos sites tenham boa aparência em dispositivos móveis, mas precisamos considerar outra consulta de mídia: “mínimo para desktop”.

Eu não consideraria isso um caso de “mobile first”, que eu não aceito. Mas especificar o escopo de uma animação ou transição é uma ideia brilhante quando se trata de desempenho!