How many media queries is too many?

[Gaber]

I’ve been using the Sass 3.2 media query mixin technique detailed here among other places, and am really liking the convenience of dropping media queries in right where I need them, instead of in big blocks or separate stylesheets.

My concern is that my outputted CSS is quickly becoming littered with dozens of little media queries for individual elements. I don’t know if there’s a clear answer, but does anyone where more or less when too many individual media queries starts to become a CSS rendering performance concern?

[Kitty Giraudel]

165 is not too many : https://css-tricks.com/lark-queries/. :D

[djdaniel150]

Actually placing media queries directly in the head section of your page will cause your pages to load much faster than linking to them. Also, linking to an external style sheet for any reason will slow down the page load time as well. I’ve tested every way possible, and honestly, putting all your code directly on page is best. When I tried using the “link” or “@import”, the pages loaded extremely slow as compared to placing the media queries directly on each page. This is what I did with last website I created, pctechauthority.com:
[just view the homepages source code for queries](http://www.pctechauthority.com “view source code to see queries”). Despite all the media queries I used, the site scored as being faster than 94% of all pages on the net as defined by Google’s “page speed insights.” I use “make the web faster” alot when testing my pages. Its nice to get an idea of how our pages loading times compare to others on the internet.

[Paulie_D]

…but every time you want to change the CSS you have to make the change on multiple pages.

Frankly, I doubt that linking to a single css stylesheet will have any appreciable (let alone practical) difference in page loading speeds. At best you are saving a single http request, the amount of data being downloaded is exactly the same.

>Despite all the media queries I used, the site scored as being faster than 94% of all pages on the net as defined by Google’s “page speed insights.

I’m not sure what that statistic actually means…I could make a blank page and it would load faster than 100% of the ‘pages on the net’.

[Paulie_D]

>I use “make the web faster” a lot when testing my pages. Its nice to get any idea of how our pages loading times compare to others on the internet.

Here’s what Google said.

>Specifying external stylesheets and inline style blocks in the **body of an HTML document** can negatively affect the browser’s rendering performance. Browsers block rendering a web page until all external stylesheets have been downloaded. Inline style blocks (specified with the

[djdaniel150]

Exactly my point! Google just reaffirmed what I already stated, External style sheets slow down page rendering. I stated to place your media queries, that is “@media”, not “@import” in the document itself, and it will load much faster. You are right though Paulie about having to edit every single page if you place your css on each page. However, you can still make a template for each section of your site, and update the code to multiple pages in minutes. That’s what I did, and it works great. People use way too many external style sheets these days, it’s nuts! I see pages on the web with like 20, 30, or more external links to style sheets on a single page, and they take a million years to load. “@import” is terrible and the link tag isn’t much better. This is why I refuse to link to an external style sheet for any reason.

[djdaniel150]

You will be fine with what you are doing Gaber! I was concerned as well with my latest site, cause it too had a million “@media” declarations, they still load faster than any external link will, that’s for sure.

[Paulie_D]

No, you’ve misread, they say that external style sheets called from within the BODY slow down page rendering not sheets links in the HEAD.

Certainly the number of stylesheets should be kept to a minimum because of the number of http requests but whether you have a single css file, 20 of them or you’ve declared all your styles in the head of the document the amount of data is the same and will have little or no impact on page loading.

>However, you can still make a template for each section of your site, and update the code to multiple pages in minutes.

Why should I use a template when I can have a single CSS file and ALL my pages update immediately?

[Gaber]

Wait, you guys are talking about putting CSS < style > blocks in the head of every page? No way, man. That’s a maintainability nightmare. Any loading benefits you might possibly get over a linked stylesheet would be so small as to be negligible. You would probably save as much or more eliminating a single jpeg image from your page.

I use Sass to compile my modular stylesheets into one big minified version that I link to.

But back to the original topic, I’ve looked around and come to the same conclusion: you’d have to literally put in hundreds or even thousands of media queries before it became an issue, so I’ve stopped worrying about it, except in terms of making my stylesheets too complicated.

[Paulie_D]

>Wait, you guys are talking about putting CSS < style > blocks in the head of every page?

No, that’s what @djdaniel150 is suggesting and I agree with your comments

I’m suggesting exactly what you are doing.

[sliver37]

I’ve been thinking about the same question. I think the only real “issue” with doing it this way (which is indeed very awesome!) is the code bloat it produces instead of a condensed block down the bottom. As you have stated you would need a significant amount of media queries/large web site before performance would be a worry.

Dropping queries in exactly where you need them is fun, convenient and much easier (IMO) which definitely outweighs the downside of code bloat, when you add gzip into the mix you’re basically covering yourself in that regard.

<3 Sass!

[djdaniel150]

Actually it could be a maintainability nightmare either way. It depends on the structure of your site and what you are designing for. If your site consists of 500+ pages that is divided into 30 sections, all with different formatting, then external style sheets are nothing more than a headache. I have some pages that share the same formatting as others, but once you bring multimedia into the mix, a single page may no longer share the same formatting as other pages in its section. A “static” website where every page is the same should use external style sheets. Otherwise, who wants to edit 2 pages for every single one webpage? Some people cannot code all that fast, in this case they should use external style sheets. I can code a page out in seconds, practically with my eyes shut, I have no need for external anything. Also, alot of the time I just simply copy and paste a page to retain its formatting, then simply replace the content (this takes about 5 seconds of time), and the pages load fast because I’m not linking to a million style sheets.

There’s site popping up everywhere that have literally hundreds of external style sheets, goofy.

[TheDoc]

@djdaniel150 – I genuinely enjoy your enthusiasm, but you seem to be suggesting that we abandon external stylesheets in favour of keeping everything required in a single document. While I commend you on the thought, it’s completely ridiculous and is quite possibly the worst advice I’ve seen given on this forum.

You *must* understand that this would be a nightmare for maintainability. Are you telling me that you’re developing sites that have **no** common elements between them? I can’t even believe that I’m required to argue in favour of using a stylesheet document…

[Kitty Giraudel]

Putting all your CSS in the head of your pages in a matter of performance is a bad idea. A 0.1s gain doesn’t worth a 2-days loss at every single required modification.

[Gaber]

Yeah, @djdaniel150 no offense but using `

[Author]

Posts