CODEWITHSUNDEEP
cssmedia-queries
Sebastien Daniel
Sebastien Daniel

Reputation: 4778

CSS media queries - many vs few

Suppose 1 css file, and 3 @media formats, say:

@media (min-width:1280px)
@media (min-width:640px) and (max-width:1279px)
@media (max-width:639px)

Is there a significant performance difference between using each @media format once and cramming all appropriate CSS rules inside, such as:

@media (min-width:1280px) {
  /* all css for this format */
}

@media (min-width:640px) and (max-width:1279px) {
  /* all css for this format */
}

@media (max-width:639px) {
  /* all css for this format */
}

VS

Using as many @media declarations as necessary (about as many as you have CSS rules/sections)... such as:

div.some-class-name {
  /* styles */
}

@media (min-width:1280px) {
  div.some-class-name {
    /* styles for this format */
  }
}

@media (min-width:640px) and (max-width:1279px) {
  div.some-class-name {
    /* styles for this format */
  }
}
@media (max-width:639px) {
  div.some-class-name {
    /* styles for this format */
  }
}

I personally prefer version 2 (though maybe not so excessive), as it's much easier to track a specific pair of styles for each @media query.

thx for feedback!

Upvotes: 2

Views: 2592

Answers (4)

Ricardo Parker
Ricardo Parker

Reputation: 809

Your version 1 is very similar to v2. The difference I see is you wrote "all CSS" versus "styles for this format". In the case of writing all of the CSS you will have a much larger file than V2. Loading a larger file takes extra time than a smaller file, so version 2 will be more efficient.

In any case, use these 2 rules for performance: 1) Shorten your CSS as much as possible. Avoid redundancy wherever you can. If in the top media query you use "h2 {padding: 0 }, then don't use that in the other queries as that would be completely unnecessary. 2) Look at the number of characters or file size of your CSS. The smaller file will always load faster.

Upvotes: 0

colmjude
colmjude

Reputation: 314

In practise no there shouldn't be a significant performance difference, there shouldn't be one at all. Browsers generally serialise and strip out duplicate media queries.

The only potential issue is if the extra MQs add bloat to your css file and thus it takes longer to download, delaying the render. It is pretty unlikely for this to happen.

You can read a little more about it here

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

The performance difference issues in your examples are extremely small. The only thing I can tell you about performance is this: If you use stylesheets, ALL stylesheets will be loaded by the browser. Only the one that matches the media query will be applied.

Basically, just use whichever method is easier to change, organize, etc. . . my guess is stylesheets.

About the NUMBER of queries, there will be no performance changes. Most browsers automatically calculate the width, height, screen, type etc., even without media queries.

Hope that helps!

Upvotes: 0

Fillip Peyton
Fillip Peyton

Reputation: 3657

I'm not an expert on this, but I found a decent article addressing this:

https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/

It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn’t matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down). The only thing I could add here is that using many inline media queries often is that they’re increasing the size of your CSS (unless your gzipping it) and that affects performance as it’s loaded blocking.

Makes sense to me. I personally like to group element styles rather than grouping media queries (version 2 in your question). In my mind, CSS's goal is to style your elements and styling them based on screen size is a secondary goal.

Upvotes: 3

Related Questions