"@media query" dentro da formula do CSS

Front-end
,
#1

Boa tarde amigos,

Estou atuando como Junior, entretanto estou com certas dúvidas sobre “estar correto” e “estar duvidoso”, o tópico se trata de SASS.

Aprendi que o “@media query” está depois da fórmula CSS padrão, e aí sim alteramos o design para cada resolução usando o “@media screen and (max-width: 480px)” inserimos o layout para a resolução informada desde o body até os componentes.

Entretanto, me deparei que tem código onde a pessoa faz isso: Exemplo:

> .content {
            height: calc(100% - 72px);
            width: 100%;
            overflow: auto;
            z-index: 2;
            position: relative;

            @media screen and (max-width: 480px) {
                overflow: hidden !important;
            }

Sabem me dizer se essa forma é melhor ou pior se tratando de manutenções futuras? Ou melhor, quais seus pontos positivos e negativos? Obrigado desde já!

#2

Depende, só da pra fazer isso se estiver usando SASS/SCSS…

Eu prefiro dessa forma, a estilização fica bem mais clara,

Se vc tiver uma classe que tem uma ul e uma li e uma div depois, vc pode aplicar o que quiser dentro do contexto ao invés de ter que ficar chamando tudo, ex:


.teste {
   ul {
      li {
         …
         @media aqui
      }
   }
}
#3

Muito bom, na prática hoje percebo que fica mais clara.

Obrigado pela ajuda :slight_smile: