The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Separate CSS files VS One CSS file (@Media)

  • # January 26, 2013 at 5:53 pm

    hi all,

    Can I hear your thoughts on which one of these gives best performance in the would of responsive web design.

    Example of separate CSS files –

    Example of one CSS file –

    @media only screen and (min-width: 480px) {
    /* Style */
    @media only screen and (min-width: 768px) {
    /* Style */

    # January 26, 2013 at 8:21 pm

    Afaik any browser will load both stylesheets, no matter if the media query matches or not. so from a pure performance view the latter alternative should be just a tiny bit better. But from a maintainability point of view i would tend to use the first version anyway :)

    # January 27, 2013 at 5:06 am

    I think that the first way is better. While browsers will load both, some newer browsers (latest WebKit) will delay the loading of a stylesheet that doesn’t currently apply until after the page has been shown and everything else has been loaded.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed