9

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.

1
  • 1
    Use a CSS precompiler like SASS or Less and all this will go away and you won't have to worry about it.
    – DavidG
    Commented Mar 15, 2017 at 15:24

2 Answers 2

12

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.

2

Writing a common media query interval for a range of screen sizes rather than writing media queries wherever necessary makes the code more manageable and scalable.

@media screen and (min-width: 320px) and (max-width: 767px) {
  /*Mobile Device Screens*/
}

@media screen and (min-width: 991px) {
  /*Large Screens*/
}

To make the code more readable we can divide the code in each interval into sections and sub-sections based on the different pages and their respective contents.

@media screen and (min-width: 320px) and (max-width: 767px) {
  /*Mobile Device Screens*/
   /*Homepage*/
   .
   .
   .
   /*About*/
   .
   .
   .
}

@media screen and (min-width: 991px) {
  /*Large Screens*/
   /*Homepage*/
   .
   .
   .
   /*About*/
   .
   .
   .
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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