how to I don't know if it is a mistake or writer wrote it for reason !!!

[legendtariq]

Quote

Why are we writing the code in this way ?  

 

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Quote

Why not this way ?

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
	/* we dont need this */
}

I dont want to a oversmart guy or,, the guy like who disrespect his teacher. Thanks.

[Ingolme]

It appears as if the reason they have separated them into two media queries is to put a comment above each one describing what it does.

If you are writing your own code which is not for illustrative purposes, there is no need to separate them like that.