resumir codigo css

[Biel. 9]

Boa noite a todos. Direto ao ponto. Pessoal como faço para resumir o EX 3 abaixo

este exemplo NÃO está resumido. Repetir as mesmas informações nas três divs 
#aprendiz_01{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
#aprendiz_02{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
#aprendiz_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}

este exemplo está resumido. Não foi preciso Repetir as mesmas informações nas três divs 
#aprendiz_01,
#aprendiz_02,
#aprendiz_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}

...

Este  EX 3 não está resumido, gostaria de saber como resumir.

EX 3 
@media (min-width:340px) {
#rtgh_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:480px) {
#rtgh_03{ width:49%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:768px) {
#rtgh_03{ width:60%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:1024px) {
#rtgh_03{ width:65%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:1366px) {
#rtgh_03{ width:69%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

[reebr 94]

Use classes para agrupar elementos com propriedades idênticas.

[L. Henrique 179]

Use classes para agrupar elementos com propriedades idênticas.

Atenha-se ao que foi perguntado. A redução de media-queries não difere quanto ao uso de classes ou id's.

 

--------------------------------------------------------------------------------------------------------------------------------------

 

Biel,

 

Você não vai conseguir reduzir um grupo de media queries a um só, a não ser que esteja trabalhando com SASS, SCSS, LESS ou Stylus (que são pré processadores de CSS).

 

A necessidade de que eles sejam replicados é em questão ao tamanho. Você obrigatoriamente precisa definir quais propriedades o elemento receberá em determinado tamanho de tela, ou seja, haverá replicações de código.

 

O que você pode fazer é eliminar os elementos que nele já estão presentes fora do Media Query. Exemplo:

.elemento {
   width: 100%; /* Será alterado */
   height: 100px; /* Será alterado */
   background: red;
   text-align: left;
   opacity: 0.8;
   color: green;
}

@media screen and (max-width: 750px) {
   .elemento { width: 50%; height: auto; }
}
@media screen and (max-width: 450px) {
   .elemento { width: 40%; height: auto; }
}

Em questão aos pré-processadores, ao invés de replicar, você pode criar uma condição for. Veja um exemplo de como seria no Stylus:

/* Stylus */
.elemento
   for i in 1..5
      @media (min-width: 2**(i+7)px)
         width: 150px * i

/* Compilado */
@media (min-width: 256px) {
   .elemento {
      width: 150px;
   }
}
@media (min-width: 512px) {
   .elemento {
      width: 300px;
    }
}
@media (min-width: 1024px) {
   .elemento {
      width: 450px;
   }
}
@media (min-width: 2048px) {
   .elemento {
      width: 600px;
   }
}
@media (min-width: 4096px) {
   .elemento {
      width: 750px;
   }
}

Agora é só ir treinando e boa sorte!