1

If you have a lot of files, would there be any benefit to doing something like this in the header:

<style type="text/css">
<?php 
include("css/myCss1.css"); 
include("css/myCss2.css"); 
include("css/myCss3.css"); 
include("css/myCss4.css"); 
include("css/myCss5.css"); 
?>
</style>

That way server returns one file instead of several. You can also load the content from js in between script tags.

Please don't flame, just explain why this would or would not make sense in a situation where you need to have a lot of individual files and you want to consolidate instead of having the main file make calls for those files individually.

I've tried and they seem to work... but what are the repercussions on the server or benefits of speed (if any).

Just curious... Thank you very much.

UPDATE: Thank you for all replies... Would another solution (that would deal with the cache issue) be to have 1 external php file that load all the other css into it - sort of combining all into 1?? Does that make sense?

Noodle Head
  • 431
  • 3
  • 10
  • 23
  • 1
    Would it not make more sense to simply merge the files into one CSS/JS file for production? Then you are not doing multiple calls with php. I'm not very good with php so I wouldn't know the difference. – Nunners Oct 09 '13 at 15:33
  • I know that can be done but it requires either to merge file and leave them like that - which would make development a pain since they would become massive and hard to find parts you need from them.... OR having to do merges every time you change something in one file. Those are the only drawbacks. – Noodle Head Oct 09 '13 at 15:42
  • True but it would most likely depend on how often you imagine making changes, if you expect to change a single CSS every week then leave that out of the merger. – Nunners Oct 09 '13 at 15:46
  • To simply answer your original question there is no positive about doing this, you are simply pushing the http request to the server, there is still 5 requests being made, it just changes what is making the requests. – Nunners Oct 09 '13 at 15:47
  • I agree... there would still be 5 requests. Although I don't know that requesting something over the network would equal the server requesting the files which reside on it in the first place. Of course that is only speculation. Parsing might totally ruin any such advantage... but that is speculation too. – Noodle Head Oct 09 '13 at 15:54
  • That's not speculation, you can benchmark it and get an authoritative analysis – Hanky Panky Oct 09 '13 at 15:55
  • That's what I was in the process of doing :) Thanks – Noodle Head Oct 09 '13 at 16:00

3 Answers3

4

You should use an external stylesheet, so it can be cached separately because in most cases PHP is used for dynamic data retrieved from databases and you might not want to cache all the data. If you are not using PHP for anything else than merging CSS, you should definitely use LESS @ http://www.lesscss.org, as it is a CSS preprocessing language that has many features that make developing CSS easier which includes merging css files together. You could also try SASS @ http://sass-lang.com/ which is similar. This way you reduce the number of HTTP requests, the server doesn't have to keep running PHP code unnecessarily, and don't do as many reads from disk.

1

Of course that would work, but since the size of HTML output content remains the same and same number of KiloBytes are sent to the client, there is no real benefit here.

And there could be many downsides, first up it would be hard to debug which file to update when you have to update any css class. You'll have to find that manually.

But one major point against this would be that PHP includes are not meant for CSS includes. Although that might appear to work for you, a source code include is for source code. Its bad programming practice and also it requires PHP to parse all those CSS files unnecessarily. This unwarranted parsing of your CSS files will counter the benefits you will obtain by that. Rather you can simply merge all those CSS files together into one.

Hanky Panky
  • 46,730
  • 8
  • 72
  • 95
  • Yes, but instead of waiting for all those files to be retrieved they would be forked over on the first try... wouldn't that make a difference? I know the nr of kb is the same... – Noodle Head Oct 09 '13 at 15:33
  • Doesn't make a difference. It will still take practically the same time for client to get your complete CSS – Hanky Panky Oct 09 '13 at 15:34
  • There is a reasonable benefit to minimizing the number of HTTP Requests when the page loads, each seperate CSS/JS File is another HTTP Request which adds to the load time. – Nunners Oct 09 '13 at 15:35
  • @Nunners what about PHP having to parse those CSS files for no reason? does that not counter the benefit? Why put extra burden on server when you can simply put all that css code in one css file if needed? – Hanky Panky Oct 09 '13 at 15:36
  • @Hanky웃Panky I agree. It would make more sense to condense the CSS files into a single CSS file and then simply request that. It would limit the number of requests and potentially increase the speed of the load. – Nunners Oct 09 '13 at 15:38
  • A lot of people use an Asset Manager. This would combine all js and css files together. – AlexMorley-Finch Oct 09 '13 at 15:39
  • 1
    Having all your CSS in your HTML might mean fewer HTTP requests and also mean the same amount of data is being transferred. However, browsers cache CSS files, to reduce page loading times so in the long run it would better to have everything in a separate file. – Jonathon Oct 09 '13 at 15:42
  • Good point @Jonathon... AlexMorley what apps are available for doing this automatically, yet leaving the original files separated for easier development... Hanky as mentioned above in response to Nunners, combining files solve problems but it's hard to develop and polish BIG files... either that or you constantly have to combine files every time you make a small change. – Noodle Head Oct 09 '13 at 15:47
  • @Hanky 웃 Panky - I've seen people using file.css.php ... but it's probably only for being able to change the css, not facilitate their inclusion into document. – Noodle Head Oct 09 '13 at 15:51
1

In addition to Hanky Panky's answer, when including CSS files with HTML code, browsers may cache the CSS file locally, making less data be transferred between the server and the client.

When including the CSS with PHP like in your question, there can be no such local caching of the CSS.

Edit: Using one single PHP for all the CSS could in theory only work if you include the PHP-CSS as a stylesheet using HTML-code. Writing <style type="text/css"> in either the PHP-CSS file or using include inside such statement in your main file would not help. However, either way it is not something that I would recommend. PHP is not for including many CSS-files into one.

Simon Forsberg
  • 13,086
  • 10
  • 64
  • 108