41

Since there are many ways to implement CSS3 Media Queries into a website, I would like to know which one is recommended by more experienced web designers. I can think of a couple:

1. All in one Stylesheet

There is a default style which applies to all screen widths, and media queries that apply only to lower screen widths and overwrite the default, all in one file. For example:

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(please keep in mind that this is just an example)

Pros:

  • Default style applies to older browsers
  • Only one HTTP request required

Cons:

  • Gets messy with a lot of code
  • Some browsers will have to download code that they won't apply

2. Separate Stylesheets

There are separate stylesheets containing full code tailored for each screen width. Browsers only load the one that applies. For example:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

large-screen.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

  • Neat and organized
  • Only one HTTP request required
  • Browsers only load what they need

Cons:

  • (This is why I'm hesitant to use this:) When one makes a change that applies to all screen widths, the change has to be copied and pasted to the appropriate spots in all of the stylesheets.

3. Separate Stylesheets, one Global Stylesheet

The same as #1, but the global style and the media queries are in separate stylesheets. For example:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

  • Also neat and managable
  • Does not have problem of #2 when making global changes
  • Global style applies to older browsers

Cons:

  • Smaller screen-widths require 2 HTTP requests

That's all I can think of. How should media queries be managed?

Thanks for any responses.

4
  • I'm partial to #3. If you are using the same styles, it seems somewhat redundant to have them listed out on a few stylesheets. I think #1 can be ditched pretty easily, because one of the main points of media screens is to allow users to only load what they need to.
    – Chad
    Jul 23, 2012 at 2:53
  • But #1 would still load faster than #3 on smaller screens, and just a bit slower on larger screens... Jul 23, 2012 at 3:01
  • 3
    #2 "Only one HTTP request required" "Browsers only load what they need" sadly that's not the case they will download it anyway.
    – Knu
    Jul 23, 2012 at 14:32
  • Is that true? But I understand why they would do that: in case the window gets resized. Jul 23, 2012 at 17:31

3 Answers 3

31

Well, I certainly can't claim to be an authority on the matter (I'm still learning about coding conventions myself), but I actually lean towards option #1 - a single stylesheet. I'm thinking of a specific implementation of it, though. Instead of having a single break point for each case of screen size you need new styles for, I'd suggest multiple break points - one for the CSS styles of each module where multiple screen sizes need to be addressed.

Ah...that might have been a slightly confusing statement. An example is in order...

Rather than something like:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

I'd suggest option #1, just implemented as so:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(All the classes are placeholders. I'm not very creative...)

Though this means you'll be doing the same media query declaration multiple times (leading to a bit more code), it's a lot more handy for testing out single modules, which will overall help the maintainability of your site as it gets bigger. Try adding multiple real styles, more tags/classes/id's to the example I gave, and maybe add a bit more whitespace to them, and you'll see soon see how much quicker it is to narrow down and change/append styles (across all screen sizes) in the implementation shown by the second part of the example.

And I credit this answer quite completely to information from Scalable and Modular Architecture for CSS, by Jonathan Snook. (After all, there's no way a beginner like me would be able to figure out and reason an answer like that all by myself!) As quoted from one of the many relevant parts of that book,

"...instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states."

Though, if by personal preference or other you'd rather not use this approach, then you're free to go with any of the other options you proposed - after all, Snook himself says that his book "is more style guide than rigid framework", so don't feel like this is a coding standard. (Though I feel it should be. XD)

9
  • 1
    This is actually a pretty cool concept, and seems very organized. Thanks! Jul 26, 2012 at 17:34
  • I was debating on whether or not to organize my media queries close to what they modify or within a single media query. I certainly prefer close to modification strategy for maintenance, and I'm not worried about the small about of duplicate logic in multiple media queries because that should not change until a large overhaul of a site.
    – Derek Litz
    Jul 3, 2013 at 18:38
  • Another thing to consider is whether or not to overlap your media queries (basically media queries that apply to several views...). I personally think overlapping media queries make things harder to understand, thus harder to make any modifications to or even get right in the first place. Overlapping media queries are a premature optimization IMO, but may be useful for trying stuff out/testing/mock ups.
    – Derek Litz
    Jul 3, 2013 at 18:42
  • 2
    Ha! I totally came up with the same system while going through a recent project and was just wondering how everyone else did things. Looks like we think alike! :)
    – Funktr0n
    Sep 26, 2013 at 18:01
  • 1
    @Malky.Kid Not necessarily - if at any point you need to revise the styling for a particular control, making changes across multiple breakpoints would require opening multiple stylesheets, and finding where the styling for the control is defined in each one. Maintainability doesn't scale well as the project grows. The benefit of having all the styling for a module in a single section is that you only have to track it down once to make changes to it. Furthermore, it's a lot easier to see the cascading effects of styles if they're all grouped together, which can save a lot of time debugging CSS.
    – Serlite
    Nov 30, 2017 at 22:42
4

I believe in "putting code where you expect it". If a style needs overruling I would want my code that overrules to be as close to the default style, thus in the same document. That way, a year from now, I will still know what's going on when I look at the code. In the other approach (separate css file per breakpoint) I will need to remember to goo look for overruling styles code in a separate file. Not a problem, unless I forget I did it that way a year from now. Guess it's personal preference and the browser doesn't care.

1

If you want to use the 2nd option there's a way to avoid "copy+pasting" the global styles that you need for both your mobile and desktop versions of the site which is veeeeeery handy and helps you keep everything more organized in my opinion and that is using SASS.

You could have something like that:

> CSS Folder
> Sass folder
 - _global.scss
 - _mobile_layout.scss
 - _desktop_layout.scss
 - main_mobile.scss
 - main_desktop.scss

which will compile into

> CSS Folder
 - main_mobile.css
 - main_desktop.css

Hope you find it useful ^^

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.