Performace do CSS com o SASS

Fala ai André, tudo bem?

Este processo melhora muito a manutenção do código, mas e sobre a performace? Para um site que é em mobile first por exemplo, você tem uma media query apenas para o desktop, cheia de códigos e funcionalidades, a performace é afetada devido essa repetição de código dos media query?

Sim, quanto mais códigos e processamento que o navegador precise fazer, mais a performance tem de a diminuir.

Mas, nesse caso o impacto é bem pequeno ao meu ver, isso porque quando o navegador leu o CSS o mesmo já interpretou as media queries, o impacto maior seria na quantidade de linhas para ler.

Mas, se a media query contém apenas o necessário e não códigos à mais, então está tranquilo, o efeito colateral no final não deve ser tão grande e perceptível ao usuário.

Espero ter ajudado.

Opa Matheus beleza? Então nesse caso é válido para projetos menores com pouco código certo?

Fala André, na verdade a questão do média é um pouco indiferente, exemplo:

.titulo {
    @media (max-width: 768px) {
        color: red;
    }
}

.texto {
    @media (max-width: 768px) {
        color: black;
    }
}

Isso iria gerar um CSS mais ou menos assim:

@media (max-width: 768px) {
    .titulo {
        color: red;
    }
}

@media (max-width: 768px) {
    .texto {
        color: black;
    }
}

Porém, se a gente definir tudo em um media:

@media (max-width: 768px) {
    .titulo {
        color: red;
    }

    .texto {
        color: black;
    }
}

O CSS gerado seria algo mais ou menos assim:

@media (max-width: 768px) {
    .titulo {
        color: red;
    }

    .texto {
        color: black;
    }
}

Muito parecido com o que escrevemos no SASS.

O ponto é que essa diferença de ler apenas um @media ou vários @media não tem tanto impacto na performance final do site.

O maior impacto seria o seu CSS ter códigos à mais, ou seja, imagine que você está em um celular e a pessoa recebeu o seguinte CSS:

@media (max-width: 768px) {
    .titulo {
        color: red;
    }

    .texto {
        color: black;
    }
}

@media (max-width: 1200px) {
    .titulo {
        color: red;
    }

    .texto {
        color: black;
    }
}

@media (max-width: 1920px) {
    .titulo {
        color: red;
    }

    .texto {
        color: black;
    }
}

Nesse caso, tem muito trecho que nem se aplica ao mobile, dessa forma o navegador iria ler, interpretar e processar CSS desnecessário.

Espero ter ajudado.

Ahhh pode crer chefe! Então é irrelevante msm :D

Valeu demais, vou começar q utilizar

Magina André, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.