Recomendo fortemente que faça em arquivos separados.
Vou responder a sua pergunta com tudo de uma vez:
1) Faça um CSS que seja padrão, TUDO aquilo que se repete ponha nele (lembra do D.R.Y.? olha ele aqui) Ex. um botão do menu, ele pode mudar de tamanho e posição, mas em todos os seus media queries eles tem o mesmo background-color, logo, ponha ele nesse
CSS padrão.
1.1) Em sites muito grandes e complexos, não há mal algum fazer vários arquivos CSS, cada um sendo responsável por um pedaço do site, como o menu, ou rodapé, etc.
2) O media query realmente funciona. Se você usar uma media querie pra telas pequenas (celulares.), e outra media querie para telas grandes (desktop), usando arquivos CSS separados faz com que o navegador só baixe o arquivo CSS que corresponde ao tamanho
da tela correto.
3) Por ultimo, quando você fizer uma media querie, tenha em mente que se você usar vários tamanhos de tela e não deixar BEM definido aonde começa e aonde termina cada media querie, o navegador acaba baixando todos os CSS dentro das medias queries que não
foram bem definidas (ou seja, use min-width e max-width).
