Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #43963
    akurtula
    Participant

    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.

    #131023
    Paulie_D
    Member

    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.

    #131035
    CrocoDillon
    Participant

    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.

    #131044
    TheDoc
    Member

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


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

    #131046
    Paulie_D
    Member

    >not if you’re using SCSS/SASS

    Unfortunately, we’re not all that fortunate.

    #131049
    akurtula
    Participant

    @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

    #131051
    TheDoc
    Member

    > Unfortunately, we’re not all that fortunate.

    What do you mean? @Paulie_D

    #131052
    TheDoc
    Member

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

    #131058
    akurtula
    Participant

    Yes, I’ll have to keep that in mind

    #131059
    CrocoDillon
    Participant

    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.

    #131062
    CrocoDillon
    Participant

    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) :)

    #131073
    akurtula
    Participant

    Thanks @CrocoDillon, great to know that comparison

    #131115
    wolfcry911
    Participant

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

    #131119
    CrocoDillon
    Participant

    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.

    #131125
    Paulie_D
    Member

    >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)
  • The forum ‘CSS’ is closed to new topics and replies.