CODEWITHSUNDEEP
twitter-bootstrapcssmedia-queries
Dylan Caudill
Dylan Caudill

Reputation: 1191

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

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.

Upvotes: 9

Views: 7551

Answers (2)

Mario Andrade
Mario Andrade

Reputation: 515

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.

Upvotes: 12

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

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*/
   .
   .
   .
}

Upvotes: 2

Related Questions