Is it better to have multiple media queries or a single media query

Question

I'm working with bootstrap and I want to (where applicable) have specific CSS for each screen size. I'm wondering if it's better to have 1 media query for each screen size in it's own section of my CSS sheet, or if I should do a media query in each spot where needed.

So let's say I have this for my standard screen size:

.example-class{
    padding: 10px;
}

And then for mobile screens, I want this:

@media(max-width: 480px){
    .example-class{
        padding: 5px;
    }
}

Should I have 1 media query for mobile screens in it's own section of my CSS where all mobile screen styling will go, or should I do a media query each time I need to have custom styling for mobile screens.

From what I can tell, having multiple media queries shouldn't necessarily impact performance. Adding many will increase the size of the CSS file though, which can impact performance.

Additionally, I want to make sure that my CSS is easily understandable to others. I think it might be easier to have a media query in each instance it's needed, that way the CSS for a particular element is all in one spot.

Answer 1

For what I understand both Webkit and Gecko engines serialize media queries (I believe it's actually a W3C recommendation) so they only have to evaluate the media query only once.

I would say that if performance is an issue for you, load specific files for each case, clearing the clutter from them. This way you end up with several smaller files and only load the files you need, when you need them.

If performance is not an issue, personally, I don't think the CSS file size will increase that much to impact your website performance. Remember that it's not normal to resize a webpage that often unless you are testing things.

As a front-end developer it's much easier to maintain CSS if your elements CSS are all together rather than having to go through several parts of a file or several files to update it.

So I recommend having:

.example-class{
    padding: 10px;
}

@media(max-width: 480px){
    .example-class{
        padding: 5px;
    }
}

Hope this helps.