CSS media queries – Order matters?

My answer on how you should use media queries can be applied to your question:

Here is how you should use media queries:

Remember use the sizes you like/need. This below is just for demo
purposes.

Non-Mobile First Method using max-width:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width: 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width: 320px) {
      /*your CSS Rules*/ 
    }

Mobile First Method using min-width:

/*==========  Mobile First Method  ==========*/
 
    @media only screen and (min-width: 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width: 960px) {
      /*your CSS Rules*/ 
    }

Here is a good tutorial from W3.org

---

Based on your edited question:

I guess this depends on each developer and how they need/think to develop his/her project.

Here is what I use to do ** (when not not using Pre-compliers)**:

I create a file styles.css which includes the general styles that will apply to the project like this:

/*==========  All Screens  ==========*/
    {
      /*General CSS Rules*/     
    }

Then having the media queries below, either using the non-mobile or mobile approach method explained above (in my case I usual use the non-mobile approach method).

But, depending on the projects you may need to have some other breaks besides the “standard” which can led you to use the rules in the way you mentioned.

Plus there are developers who prefer to separate into 2 files, the one with general styles CSS and other one with media queries styles.

Important: There is one difference from creating a file with general styles + 1 media queries (min-width:800px or max-width:799px), then only having a file with 2 media queries (min-width:800px/max-width:799px), which is when you have the general rules it will apply to ALL widths, therefore you just need to set the rules for 1 media queries.

---

Based on your last comment, the answer I could give you would be opinion-wised, so the best I can do for you is to give you a few articles so you can have your own opinion on this topic:

How many media queries is too many?

Web Performance: One or thousands of Media Queries?

Debunking Responsive CSS Performance Myths