Question

I had a thought…

Dunno if it’s a good one or a bad one.

I am working on an image-less/responsive theme, for a SMF Fork. I was thinking since it’s written in PHP, would it be valid to add php include a “style.php” in the header, containing the all the styles for the pages.

I was thinking this would give me two major benefits. One, would be that I could add variables start to the css file. Two, it would be one less HTTP request. I know that pagespeed and yslow would bitch about the css being included inside the page in between tags, but it is none the wiser, correct?

As far as I can tell, I see alot of benefits in doing it this way regardless of what pagespeed/yslow thinks. I could even do this with javascript, maybe…

I wonder if the IE maximum 4096 CSS rules would still apply?

I am a PHP Ultra Noob, but have a good amount of experience in web design. I can’t seem to fine a reason “not” to do it. Any experts willing to share their thought on this idea?

Answer 1

A css file is generally more valid for better speed, because it is requested but once, and then cached for a long time. It is 1 extra request for the whole browsing session if they haven’t got in in their cache already compared to the same css over and over and over again in the head tags, making your actual pages load slower. All in all, after a few requests a separate (cachable) file usually already wins out, provided you set it to be cachable for a long time (don’t worry about people not seeing css changes, if you change your css, just add some query parameter like /styles.css?rev=1. You don’t use that parameter, you just increase it whenever your css changes thus making the client request a fresh copy.

That doesn’t mean you can’t use PHP (or nodejs/less for that matter) to create or serve your CSS file, variables are indeed nice to have. If going the less route, DO convert it to css once on your own server instead of bothering clients with heavy javascript to convert it again and again.