Sobrescrevendo @media

Fiz a correção do código fazendo o aninhamento,

/** Header **/
header {
  border-top: 5px solid  $cor-padrao;
  background: rgba($cor-auxiliar, 0.8);
  height: 90px;
  width: 100%;
  position: absolute;

  .container {
    position: relative;
  }

  @media #{$mq-mobile} {

    height: auto;

    .container{
        position: static;
    }
    h1 {

        max-width: 50%;
        margin: 0 auto;

      img {
          max-width: 100%;
          margin: .5em auto;
          display: block;
      } // fim img
    }// fim h1
  }// fim media
}// fim header

@Edit

OBS: Vi que no próximo vídeo o código está correto, eu que não devo ter prestado atenção em como o professor fez, mas foi bom que eu pensei em uma forma de arrumar isso, e acabei até otimizando o código ^^.

@Edit 2

Agora fiquei confuso e surgiu uma dúvida, é melhor fazer da maneira que fiz? ou é melhor da maneira que o professor está fazendo?

Ambos os casos, a media query estará logo abaixo, porem, o modo como o professor faz a media query, fica exatamente abaixo do elemento que foi alterado, isso é bom e ruim ao mesmo tempo, pois você começa a duplicar muita media query, mas o lado bom, é que você não precisa ficar "scrollando" para verificar as mudanças.

O modo que fiz eu evito ficar duplicando essa media query, porem o código não fica exatamente abaixo do elemento que será alterado.

Oi Nicolas, tudo bem?

Sim, eu conserto isso depois como você mesmo viu.

Eu tinha essa dúvida com relação a várias MQ repetidas, e o que aprendi foi que não tem problema! Depois faz os cursos de performance web aqui do Sergio Lopes (que foi justamente a pessoa que perguntei sobre isso há 3 anos).

Quando voce ativa a opção no server de compactação g-zip, trechos de código exatamente iguais, tem o mesmo peso que apenas um. Então pode ter 700 MQ iguais, mas no browser pro usuário vai vir o peso de uma só.

Importante sempre tentar fazer como você fez mesmo: não deu certo, tenta ir por outro caminho!

Quanto ao CSS com muito scroll também não tem muito problema, uma vez que a manutenção normalmente damos nos arquivos .scss ou .less.

Espero ter ajudado e bom domingo,

Abcs!

Obrigado por tirar minha dúvida, agora surgiu outra,

como você disse:

Então pode ter 700 MQ iguais, mas no browser pro usuário vai vir o peso de uma só.

funciona da mesma maneira para outros tipos de código? exemplo:

Em css quando algo está se repetindo muito é uma boa prática, juntar os seletores que contem o mesmo valor de propriedade.

blockquote, a, p{
  color: white;
}

Com esse g-zip ele aplicaria a mesma regra dos 700 mq ter o peso de 1 no exemplo abaixo? OBS: Não irei deixar de fazer o seletor acima pois a manutenção fica bem mais fácil e o código fica mais limpo, mas é sempre bom ter uma opção a mais em alguns casos. ^^

a{
  color: white;
}
p{
  color: white;
}
blockquote{
  color: white;
}

Oi Nicolas,

Sim, qualquer informação de texto basicamente!

Abcs!

Aaa legal.

"Quanto mais eu estudo, mais estudo tem pra estudar"

Essa frase define bem essa área haha.

ahuiahuahja exatamente!