How to reuse code in multiple media only screen block

Hi,
I’ve repetitive codes like below:


nav {
	display: none;
}

They are in multiple blocks of media only screen styling like:


@media only screen and (max-width : 320px) {/* Code Here */}
@media only screen and (min-width: 321px) and (max-width: 360px) {/* Code Here */}
@media only screen and (min-width: 361px) and (max-width: 480px) {/* Code Here */}

I target them up to 7.0-inch screen size, and the nav would show on larger screen sizes.

So how do I write code only once and reuse them across the blocks which still match the criteria?
Thank you,

Give them all the same class?

Declare them first before the media rules?

If you have a rule that applies to all of those blocks, just declare it once outside of those blocks.

If you have a rule that applies to some of the blocks, just create a new @media block that encompasses the range of those blocks.