CSS diminuir codigo de responsividade

[WilliamNascimento]

Estou comecando a desenvolver utilizando o mobile frist , terminei de desenvolver meu site , porém quero a mesma interface com algumas alteracoes para o tablet .

 

Tem algum jeito de eu alterar apenas para tablet sem ter que copiar tudo ? Vou deixar um exemplo .

 

 

@media only screen and (max-height:666px){
	.main{
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: 12vh 40vh 41vh auto;
		grid-template-areas: "nome"
							 "profile"
							 "carac"
							 "footer"
		;		
	}
	/* name */

  	.name {
    background-color:rgb(15,14,14,0.9);
    grid-area: nome;
  	}

  	.name-edit{
  		text-align: center;
  		color:white;
  		font-size: 1.4em;
  		font-family: nome;
  	}

  	/*Fim name*/
  	
  	/*inicio profile*/
  	.profile {
  	grid-area: profile;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  	}

  	.foto{
  		width: 200px;
  		height: 200px;
  		border-radius: 50%;
  		background-image: url("eu.jpg");
  		box-shadow: 0px 0px 8px 2px #fff;
  		background-size: cover;
}

  	/*fim profile*/
	/*caracteristica*/	
.caracteristica {
    background-color: black;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
 	}
 	.caracteristica ul {
    display: flex;
    flex-direction: row;
  	}
  	.caracteristica li{
  	margin-left:10px;
  	}
  	.nav-div{
  	display:block;
  	font-family: nome;

  	font-size: 2.0em;
  	text-align: center;
  	line-height: 200px;
  	color:black;
  	height: 200px;
  	width: 200px;
  	border-radius: 50%;
  	background-color:black;
  	}
  	.l1{
  		background-color: rgba(0,191,255,0.5);
  	}
  	.l2{
  		background-color: rgba(0,250,154,1);
  	}
  	.l3{
	background-color: rgba(147,112,219,1);
  	}
  	.icon{
  		color:rgba(255,255,255);
  		font-size: 1.1em!important;
  	}

}

Eu tenho este codigo acima porém quero fazer pequenas alteracoes nas classes para tablet , entao eu tentei apenas por exemplo fazer isto :

@media only screen and (min-width : 700px){
.profile {
  	grid-area: profile;
    background-color: red;
    display: flex;
    justify-content: space-beetween;
    align-items: center;
  	}


}

porém , todas as alteracao nao sao feitas  , apenas esta . Entao tenho que copiar o primeiro codigo , criar a mediaq , colar tudo e modificar o que eu quero .

 

Tem algum jeito mais simples ?

[Adriano_web]

Olá @WilliamNascimento boa noite tudo bem?

 

Então, você pode utilizar pré-processadores para desenvolver as suas folhas de estilo CSS, os mais vistos são SASS e LESS.

 

Ah uma ampla documentação sobre SASS no site da w3schools, recomendo você dar uma passada por lá depois. Também pode conhecer o LESS na documentação DevDocs clicando aqui. É incrível como realmente eles facilitam e muito na hora de desenvolver seus códigos, vale a pena aprende-los.