Grow your CSS skills. Land your dream job.

[Solved]Does the location of media queries affect the website?

  • # April 8, 2013 at 10:32 am

    Hi

    I tend to write the media queries where I need them like this for example:

    header{

    }
    @media (max-width: 800px){
    .header{

    }
    }
    footer{

    }
    @media (max-width: 800px){
    footer{

    }
    }

    Rather then having the media queries seperate

    @media (max-width: 800px){
    .header{

    }
    footer{

    }
    }
    I find the first method to be much more maintainable. However is there a “right way” to do it. So beyond personal preferences, is there any other reason to favor one over the other interms of css performance or anything else.

    # April 8, 2013 at 10:39 am

    Other than a few characters /bytes difference…I think you’ll find we’re pretty much evenly divided on the subject.

    Personally, I prefer to keep everything under in one media query but that’s just me.

    # April 8, 2013 at 2:44 pm

    Having one MQ is easier to maintain if you want to change the breakpoint. Question is if you want to change the breakpoint for all elements of just a few though.

    I don’t know where I’ve read it but iirc I’ve read somewhere that performance will be the same either way, so personal preference here.

    # April 8, 2013 at 3:58 pm

    > Having one MQ is easier to maintain if you want to change the breakpoint.

    @CrocoDillon – not if you’re using SCSS/SASS! http://css-tricks.com/media-queries-sass-3-2-and-codekit/

    # April 8, 2013 at 4:08 pm

    >not if you’re using SCSS/SASS

    Unfortunately, we’re not all that fortunate.

    # April 8, 2013 at 4:46 pm

    @CrocoDillon – I have been using the same technique as shown in the link provided by @TheDoc so maintenance is easy in this case.
    It’s good to know that it does not effect performance
    Thanks

    # April 8, 2013 at 4:48 pm

    > Unfortunately, we’re not all that fortunate.

    What do you mean? @Paulie_D

    # April 8, 2013 at 4:49 pm

    @akurtula – it doesn’t effect ‘performance’, per se. But it will lead to a slightly larger file size.

    # April 8, 2013 at 5:29 pm

    Yes, I’ll have to keep that in mind

    # April 8, 2013 at 5:31 pm

    Yeah of course, I meant if you aren’t using any CSS preprocessor (like me :P )

    I don’t got any tests to prove it but if you use gzip the file increase (gzipped) will be even less than slightly since it compresses duplicated strings effectively.

    # April 8, 2013 at 5:39 pm

    I just ran a test using my current project. The css file as it is now is 6.4 kB and 2.5 kB gzipped. I added 100 media queries (empty ones buy exact copies).

    File size went up to 10.3 kB but gzipped it stayed at 2.5 kB. So I added 900 more media queries (1000 total).

    File size went up to 45.4 kB but gzipped only went up to 2.7 kB.

    So don’t worry about file size if you use gzip (like you should) :)

    # April 8, 2013 at 8:32 pm

    Thanks @CrocoDillon, great to know that comparison

    # April 9, 2013 at 7:26 am

    @CrocoDillon, I don’t think that’s a good test case – the compression is looking for patterns and you’ve provided 1000 duplicated patterns.

    # April 9, 2013 at 7:50 am

    I think I explicitly mentioned that. It’s a small and simple test to prove how efficient gzipping is with duplicating strings, which was the main concern, increase of size by having *the same* MQ multiple times.

    I did rerun the test however, with 100 duplicate MQs with different contents. Feel free to make a better test :)

    New results: 13.4 kB and 2.8 kB gzipped. Less dramatic, more realistic but still impressive results.

    # April 9, 2013 at 8:16 am

    >What do you mean? @Paulie_D

    Because Codekit isn’t available for Windows and I have yet to find anything (including Scout) that works as well ‘out of the box’.

    I’m dwelling on investing in the Compass App but a free trial doesn’t seem to be available.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".