Where to put css media queries in a CSS file?

Question

Where to put CSS media queries? Each after the related element class style or pack them at the bottom of the CSS files? which one is standard? or which one do you prefer?

Answer 1

It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily.

So, if you are working on a project which only has a few media queries I would suggest leaving them all in one stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later.

However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons.

Answer 2

I found this source helpful in answering this question. CSS Declaration Order. When reading this link it talks about the order in which CSS code is placed. "Related property declarations should be grouped together in the following order:

Positioning
Box model
Typographic
Visual"

As for your question, it talks about media query placement having to say this about it, "Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup."

All this information can from this man's website linked above: Mark Otto @mdo Director of Design at GitHub. Creator of Bootstrap. Previously at Twitter.

This helped in giving me some sort of place to start as far as CSS code organization.

Answer 3

Put all media queries in a block at the very end so they will override the relevant style further up the sheet.

When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.

Hence the order goes like this: Make complete design --> Add the media query at the bottom.