CSS external stylesheets

[GrumpyYoungMan]

Can we create a separate CSS style sheet for the form elements which would only be loaded as and when we need the form elements? Rather than having one big CSS file with all the CSS styling that may not be required on every page? As this would help page load speed and bandwidth? (I guess text files have a small footprint so I may have over thought this?)

Do all CSS stylesheets have to be loaded via the HTML head section OR can they be loaded on the fly via the body section?

[Jason Knight]

In practice you can kind-of place it anywhere, but it's invalid markup. REALLY invalid. I advise against it.

LINK goes in HEAD. If for no other reason than to tell the browser ASAP to start loading it... ASAP.

Hence why my squire system's template has the option to store page specific stylesheets in the Settings. If you maintain separation of process from output, you can determine which styles each page needs -- regular template or page specific -- BEFORE you even start the output. If you need to determine that in the middle of outputting your markup -- hell, any time after you output the DOCTYPE -- there is probably something critically wrong with your architecture!

You get as far as starting ANY markup output and you don't know that **** yet? You're doing it all wrong.

[GrumpyYoungMan]

In practice you can kind-of place it anywhere, but it's invalid markup. REALLY invalid. I advise against it.

LINK goes in HEAD. If for no other reason than to tell the browser ASAP to start loading it... ASAP.

Hence why my squire system's template has the option to store page specific stylesheets in the Settings. If you maintain separation of process from output, you can determine which styles each page needs -- regular template or page specific -- BEFORE you even start the output. If you need to determine that in the middle of outputting your markup -- hell, any time after you output the DOCTYPE -- there is probably something critically wrong with your architecture!

You get as far as starting ANY markup output and you don't know that **** yet? You're doing it all wrong.

Thanks, AGAIN!! I thought that but I wanted to make sure... 

So it doesn't matter about the form styling being loaded on pages without any form elements etc? Was I overthinking it?

[John_Betong]

@GrumpYoungMan,

So it doesn't matter about the form styling being loaded on pages without any form elements etc? Was I overthinking it?

It depends


Suppose you had 99 pages each with their own unique CSS file then loading every CSS file when only one is required makes the first page remarkably “heavy” with redundant script which will result in slow page loading the first time called.


Subsequent other pages should load quite quickly because the redundant 98 CSS files are all already cached.


Remember that PHP is a server side language and could be programmed to only link the relevant single page CSS file.

[mmerlinn]

Grumpy, there is no reason to load every CSS file on first page load.  Why?  When you are generating each page, there is no reason that your page generator cannot pick and choose which RELEVANT CSS pages are needed for each page and include only those in the HEAD of the relevant page. If your CSS files are not overblown, your visitors will never notice any difference in page speed.

[Jason Knight]

IMHO it really depends on your traffic levels and type. There's no fast and easy answer.

If a LOT of your pages use the same styling, loading it on pages that don't use it can speed up those other pages? Why? CACHING!

CSS is typically CACHED. As such it's not loaded on each and every blasted page load, it's loaded ONCE when you declare it and then maintained across pages.

To that end loading CSS that's not in use on the current page can pre-cache appearance for sub-pages.

Which is why given that few if any legitimate website has ANY real reason to use more than 48k of CSS that would/should gzip to at least 2/3rds that, damned straight skippy, put it all in one monlithic file.

That said, there are plenty of cases where most users won't receive certain style. For example how many users are going to see the administration panel? Don't waste time sending that style with the normal sheet, 99.99% or more of your userbase will never see it.

It is also handy from a development standpoint to sometimes have page-specific style separate. It's just better for organization and/or expansion. In that case a SECOND stylesheet is acceptable as it's only one extra handshake.

But that's the limit. As I've said for a long time, there is NO reason for an entire site to need more than 48k of CSS in two files in all but the rarest of corner cases. Part of why these dipshit frameworks that start out with twice that amount of code or more are monuments to ignorance, incompetence, and ineptitude.