Where to put CSS3 Media Queries?

[mattfordham]

I am having a philosophical debate with myself over the best place to put media queries within style sheets. I am attempting to structure my CSS modularly (like OOCSS or SMACSS, etc). Given that context, I see two choices:

1. Put all media queries together in a separate stylesheet or section of the main stylesheet.
2. Put media queries next to their base counterparts. For example, if I have a module called “news-item”, I could put any necessary media query styles right below the definition of that module.

I am leaning towards the latter, but it would mean I’d have many more separate media queries (separate ones for each logical block of CSS requiring a responsive adjustment).

Any thoughts on this?

[TheDoc]

It’s a great question.

I think I lean towards the former, but I think it might come down to personal preference.

[joshuanhibbert]

I generally try to use a single style sheet, and always have the media queries at the very bottom.

[TheDoc]

Just to clarify, I meant the latter part of #1, just like the Joshes.

[simoncmason]

Option 2 sounds like a world of pain having to trawl through your stylesheets when you want to add a new media query to suit a different device your client has just decided is essential to support.

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

Am now using SASS so I put them either all into one partial which called at the bottom of the main file or into separate partials if the complexity warrants it.

[Paulie_D]

For development purposes only, I see no problem in having separate stylesheets for different queries if it helps your workflow, but on deployment combining them into one with the size specific query versions at then end.

[bernk]

I realize I’m late to this party, but I think it is a great question with no right answer. There are a couple of variables to consider, like the scope of the project and personal preference.

Simon is of the opinion that it would be a giant pain in the ass to maintain a multitude of media queries strewn throughout your stylesheet, but, think about when you have to change something across all queries. Now you have to change one thing, but in 3 or 4 very different places. Let’s say you have to change the background-color, padding, and font-size of the header. Instead of going straight to your header selector and changing everything there for each of your queries, where you can see all of them, you now have to search and repeat 3 times.

I’m not saying that putting your media queries “inline” is better or worse, but I can certainly think of advantages to each approach.

Personally, I have mostly been using the bottom of my main sheet or an entirely separate file (won’t be doing that one again).

[paulob]

Hi,

I used to keep the media queries separate but found it a real pain to have to go find each media query associated with one element that needed changing.

I decided to stop chasing devices and concentrate on the layout instead and apply a media query at the point where a layout started to break. This means that the media queries are often referring to individual elements and it makes sense to keep them with the original rule for that element so that you can edit them all in one go.

Many times when you resize a fluid a page there will only be one element that looks awkward and doesn’t fit and you just throw in a media query for that one element.

It does mean that you end up with more media queries and slightly more code but in tests their are little speed implications with this approach. You can of course cut down the number of media queries and group them at the end of each section (e.g. at the end of the header section) and combine similar queries but when you work on an element based approach as to a device approach your breakpoints depend on the design and may not always be the same for each element.

I’ve just finished a 100 page plus site with this approach and found it very easy going. I could see though that on a heavily styled site with hundreds of elements to cater for then some rationalisation would be needed.

Of course this approach is not suited to fixed with sites that “chase device widths” but we don’t do that any more do we :)

[bernk]

Exactly. Very well said.

The best point is to not think in terms of device widths. A site may not need a single media query in order to be “responsive”.

[Ninja Seattle]

I agree with the Doc, for development mode.
At the end Paulie_D is right, about one stylesheet.
I’m starting to add the min-width:2000px for the newer macs
cause it’s starting to get really crazy with these screens and
wtf happens when we start hitting 4K monitors with a min-width:3500px media query!?!?

[bernk]

It will mostly depend on the design and how well it is implemented. Just because resolution goes up doesn’t necessarily mean a new break point will be required. Stop thinking in terms of devices and resolutions and start concentrating on just the layout. It’ll set you free! ; )

[iangfleming]

I’m thinking for my application I may have a best of both worlds solution. Assuming you’re using Sass define your breakpoints as variables and then call those variables in your “inline” media queries. That way you can change your breakpoints all in one place and change a single property for all breakpoints in one place.

Thoughts?

[TheDutchCoder]

I prefer option 2, as it keeps the related elements together, it’s also much easier to manage if you use a pre-processor like SASS.

Most of the time I’m restricted to hand-writing CSS though, so what I use is the following structure:

.slider {}

.slider__element {}

@media only screen and (min-width: 40em) {

  .slider {}

  .slider__element {}

}

@media only screen and (min-width: 60em) {

  .slider {}

  .slider__element {}

}

It’s really difficult to work on an element when the media queries are in different files or places (in my opinion), so I like to group them at the bottom of the base element or (in exceptional cases) at the bottom of each sub-element.

[kasoziw]

I’m a little later to the party than you @bernk. haha

What do you mean by focus on the layout instead of the width/pixel depth of the device?

This question might need to be in another post.

[arald]

@kasoziw

You’re probably right that your question might be better suited for another post, but I’ll answer it anyway…

The idea of focusing on layout versus device width or resolution is that you start with a layout that would look good on the smallest devices and scale that up until the layout or some elements of it look terrible – this is your breakpoint. Adjust the layout and continue sizing up until your layout fails again and you have another breakpoint.

The idea is that your breakpoints will (most likely) not correspond to a specific device width or resolution but will optimize the layout no matter the device, giving you a responsive site no matter what new devices come out

[Author]

Posts