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?
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. 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.
...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'.
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 tag) can cause reflows and shifting of content.
Therefore, it's important to put references to external stylesheets, as well as inline style blocks,** in the head of the page**. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page.
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.
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.
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?
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.
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.
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.
@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...
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.
Yeah, @djdaniel150 no offense but using <style> blocks on every page instead of one or even several external stylesheets is wack on so many different levels.
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.
First you say you use different formatting on each page, then you say you copy and paste entire pages because the formatting is the same. I simply cannot see a need for a site that is so void of any consistency that you require separate styles for each page, especially one of 30 sections and 500+ pages. Are the header and footers on the sites the same or very similar? I find that the majority of my CSS is dedicated to just those two elements on every site I work with.
There's site popping up everywhere that have literally hundreds of external style sheets, goofy.
I've seen sites with too many stylesheets (15-20) but I have never seen any with close to 100 stylesheets. I'm sorry, but I need to see some live examples of sites that have so many different pages that they need their own styles/stylesheets.
Also, wouldn't each page having its own inline styles make each page lose most of the benefits of caching items like images and stylesheets and therefore erase any performance benefit of using inline styles on every page.
On a side note: Things like slideshows that consume a lot of JS and CSS but are generally only used on one page, I tend to give them their own stylesheet. I only include the stylesheet on the page that it is on via PHP. Thats the only time I have more than 2 stylesheets (normalize.css & the main stylesheet) and I don't even do that unless the slider consumes a very large portion of my stylesheet.
@pmac when did I state that I had a website with 30 sections and 500 pages? I didn't, that was an example of a situation that might cause problems if someone was using external style sheets, I think you need to re-read the post. Also, when did I say I used different formatting on every page? I guess you are putting words into my mouth.
@thedoc When did I state "but you seem to be suggesting that we abandon external stylesheets in favour of keeping everything required in a single document."
I never stated not to use external style sheets. Again, you are also putting words into my mouth. Re-read the post! Actually I believe I stated that some people should use external style sheets, it depends on their situation.
@djdaniel150 I'm not trying to start a fight, just making a point that you should have really good reasons to ever use <style> blocks on pages, and that performance over linked stylesheets isn't a valid reason at all.
Actually I believe I stated that some people should use external style sheets, it depends on their situation.
In what situation should a user not use external stylesheets? You are either trolling this forum hard or you are severely disconnected from the reality of web development.
I actually was not referring to you Gaber. I was referring to @pmac and @thedoc
They are trying to start a fight, but I care nothing for it. It's obvious they don't think much before they act.
As far as whether to use an external style sheet or internal style blocks, this is a matter of choice, and I never stated what people should or should not do. They can design however they like. I've been doing this for the last 6 years, and I've never seen 2 people who design the same way, so everyone has their style I guess.
There is a difference between personal preference and best practice. What you are suggesting is crazy.
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.
How on earth can you have a site that has 500 pages and not have styles that apply across all of those pages. That is exactly the reason for external stylesheets.
@TheDoc I'm 99% sure that @djdaniel150 is trolling. I base this on the content of his comments, and the markup of the site he linked to in his first comment. I fail to believe that that is the product of someone who has been doing web design for the past six years.
Simple fact's,
inline styling and style tags shouldn't be chosen over external stylesheets, because
a) it will cause massive specificity issues
b) it will actually cause harm to your sites performance, your html response won't be cached your css file will
c) if your duplicating styling over several different pages your forcing browsers to basically download duplicate content that could have been just called from an already cached css file.
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?
165 is not too many : http://css-tricks.com/lark-queries/. :D
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. 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.
...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.
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'.
Here's what Google said.
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.
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.
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.
Why should I use a template when I can have a single CSS file and ALL my pages update immediately?
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.
No, that's what @djdaniel150 is suggesting and I agree with your comments
I'm suggesting exactly what you are doing.
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!
@Gaber This is an currently open issue on the Sass repository on GitHub: https://github.com/nex3/sass/issues/116
On a slightly related note, I highly recommend this video on GitHub's CSS performance.
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.
@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...
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.
Yeah, @djdaniel150 no offense but using
<style>blocks on every page instead of one or even several external stylesheets is wack on so many different levels.First you say you use different formatting on each page, then you say you copy and paste entire pages because the formatting is the same. I simply cannot see a need for a site that is so void of any consistency that you require separate styles for each page, especially one of 30 sections and 500+ pages. Are the header and footers on the sites the same or very similar? I find that the majority of my CSS is dedicated to just those two elements on every site I work with.
I've seen sites with too many stylesheets (15-20) but I have never seen any with close to 100 stylesheets. I'm sorry, but I need to see some live examples of sites that have so many different pages that they need their own styles/stylesheets.
Also, wouldn't each page having its own inline styles make each page lose most of the benefits of caching items like images and stylesheets and therefore erase any performance benefit of using inline styles on every page.
On a side note: Things like slideshows that consume a lot of JS and CSS but are generally only used on one page, I tend to give them their own stylesheet. I only include the stylesheet on the page that it is on via PHP. Thats the only time I have more than 2 stylesheets (normalize.css & the main stylesheet) and I don't even do that unless the slider consumes a very large portion of my stylesheet.
@pmac when did I state that I had a website with 30 sections and 500 pages? I didn't, that was an example of a situation that might cause problems if someone was using external style sheets, I think you need to re-read the post. Also, when did I say I used different formatting on every page? I guess you are putting words into my mouth.
@thedoc When did I state "but you seem to be suggesting that we abandon external stylesheets in favour of keeping everything required in a single document."
I never stated not to use external style sheets. Again, you are also putting words into my mouth. Re-read the post! Actually I believe I stated that some people should use external style sheets, it depends on their situation.
Sounds to me like you guys are just trying to start a fight, yawn.
@djdaniel150 I'm not trying to start a fight, just making a point that you should have really good reasons to ever use
<style>blocks on pages, and that performance over linked stylesheets isn't a valid reason at all.In what situation should a user not use external stylesheets? You are either trolling this forum hard or you are severely disconnected from the reality of web development.
I actually was not referring to you Gaber. I was referring to @pmac and @thedoc They are trying to start a fight, but I care nothing for it. It's obvious they don't think much before they act.
As far as whether to use an external style sheet or internal style blocks, this is a matter of choice, and I never stated what people should or should not do. They can design however they like. I've been doing this for the last 6 years, and I've never seen 2 people who design the same way, so everyone has their style I guess.
There is a difference between personal preference and best practice. What you are suggesting is crazy.
How on earth can you have a site that has 500 pages and not have styles that apply across all of those pages. That is exactly the reason for external stylesheets.
@thedoc Again, you failed to comprehend what I stated.
Based on comments in this thread and others...I think we have an answer.
:)
@TheDoc I'm 99% sure that @djdaniel150 is trolling. I base this on the content of his comments, and the markup of the site he linked to in his first comment. I fail to believe that that is the product of someone who has been doing web design for the past six years.
Simple fact's, inline styling and style tags shouldn't be chosen over external stylesheets, because a) it will cause massive specificity issues b) it will actually cause harm to your sites performance, your html response won't be cached your css file will c) if your duplicating styling over several different pages your forcing browsers to basically download duplicate content that could have been just called from an already cached css file.