Why Do I Have to Put Media Queries at the Bottom of the Stylesheet

Why do I have to put media queries at the bottom of the stylesheet?

Because css is read from top to bottom. The rule that is set last, is the one that will be executed.

Translating, it is like this:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

When you add !important is like saying:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

Is it best to group similar media queries at the end of the CSS or to just keep them separated within the CSS?

Media queries were introduced in CSS3 are used for responsive CSS over different media types. Since usually the CSS code itself is applied for describing the presentation of the document or page, responsiveness is a separate feature altogether, so usually they are kept separate at the end of the CSS formatting codes. However, let me answer this question by stating the usage of both of the formats mentioned in the question.

At the end of code

Most templates of CSS available online usually keep their media queries at the bottom of the entire code making it easier to access and work with the responsiveness feature. Whenever the focus is more on "chasing device-widths" then this type of coding practice helps.

As observed, this allows to group together many basic CSS attributes that are applied over many elements.

Also, considering the cascading nature of CSS, the styling below usually (not always, refer this to know more) overwrites the styling present above. With @media queries present at the bottom of the stylesheet, it allows easy overwriting of relevant styles present above.

Finally ,as mentioned by @rguttersohn, media queries along with @keyframes are kept at the end with @keyframes usually above @media. This makes coding cleaner and easier to comprehend by others as well.

Below relevant styling counterparts

If styling is more layout-centric, it's highly useful to place @media queries next to their styling counterparts. This allows ease in editing the style and its corresponding @media query both in a single go.

This does mean that there is slightly more code, but these too can be cut down by grouping at breakpoints and section ends.

This type of styling is rarely seen in templates available online, however it's an ongoing trend.

To Summarize: I personally am of the opinion to keep all of the @media queries together at the bottom, but if I had to divide the labor of styling, I would opt for keeping the styles and @media queries together.

Also, given the broad and opinionated scope of this question, I think no answer can determined as right or wrong. I hope this answer brings enough light and information to the question.

Best Way To Place Media Queries

The shortest answer is: it depends what you're trying to achieve.

The first option is the worst in terms of file size and readability because of doubling every @media rule makes all the rules longer and hard to effectively debug.

The second option (one CSS file with all media-specific rules grouped under one @media block per media type) is the best when there are rules which overlaps each other in terms of adding something to values coming from the other @media block. In this case this would be more SEO-friendly and economical (by means of number of requests) than downloading several separate CSS files to any matched @media.

The third option is the most effective when @media classifiers don't overlap with each other at all (because it results in a smaller file to download per page load, and only one CSS file is loaded at a time. This would be the best way to go if you have some CSS files for different layouts per device, while only one is needed per device resolution - i.e. one for horizontal resolutions below 320, one for 320-720, one for 720 upwards and one specifically for printing.

Where should media queries be placed?

There is no definite answer as to where you should place your media queries. The important part is that you take an approach that makes your stylesheets maintainable.

One common approach is placing your media queries at the very bottom of your stylesheet, for easy access.

Why does the order of media queries matter in CSS?

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

or

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

the background will be blue (with a 350 pixels wide window).

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

Where do the media queries go in a stylesheet: at the bottom or mixed throughout?

I've been battling this about my head for a while, as well. Some of my sites have one big handheld- or print-only section at the bottom, some have the relevant media queries right after the selectors they affect. As far as I've seen, neither way has any impact on rendering performance one way or the other (if there is one, I haven't perceived it).

My answer is to just use whichever you feel is easier to read. If this is part of a bigger project, consult any team members who also work on the CSS and ask them which they prefer.

What is the impact of having multiple CSS media queries in one stylesheet?

Negligible.

Have you not seen the big sites and their 30k+ line stylesheets? Browsers can load it very fast, it shouldn't make a difference whether or not they are grouped together.

The real difference is on your end. Make it so that it's efficient for you to develop. Personally I think it looks better for them to be next to related styles rather than on the bottom. But be mindful that newer styles override older ones, that may be where the practice of grouping media queries on the bottom came from.

---

Related Topics