external CSS file or CSS added to head via code?

Question

I am building a website that uses a custom CMS. I am seriously considering not using external style sheets and adding all of the required CSS to the head of the pages that as needed (using PHP and include files).

I am having a really hard time coming up with reasons not to do this. Here is my benefit list:

• CSS rules are completely loaded with the original page, no additional requests.
• The same CSS injection code and be used for both HTML emails and pages (!!!)
• CSS can be effectively changed/managed via code (just like LESS).
• Classes and id's can be managed with variables/arrays.
• Better management of unused CSS rules.
• Possibly rendered faster?
• CSS would still be separated into individual pages on the server.
• ...Or stored in a database.

Am I on the right track here or is this a serious mistake?

Answer 1

Lets analyse briefly each of your reasons.

CSS rules are completely loaded with the original page, no additional requests.

Kind of true, they are on the rendering engine waiting for the start of the HTML rendering engine/process, which may take longer because the styles are inline so the HTML takes longer to arrive. Depending on size of the page, it matters.

The same CSS injection code and be used for both HTML emails and pages (!!!)

True, but it's the same if you build the email joining codes, so the email is sent with the CSS inline and the pages have the CSS inline or externally loaded.

CSS can be effectively changed/managed via code (just like LESS).

False. You can always change/modify CSS rules from the code, either using JS, using inline styles after the external CSS files and with the attribute style of tags.

Classes and id's can be managed with variables/arrays.

No idea what do you mean with this one. If you are talking about JS, you can manipulate things via DOM most of the time, just a few things won't work unless they are set on the tag initially.

Better management of unused CSS rules.

True. Unused styles, ideally, shouldn't be on the page or the process of rendering the page. Although, if you do a decent job with your CSS rules, that load should be small.

Possibly rendered faster?

Depends on the amount of CSS, HTML structure, complexity of the CSS rules. Most probably, not noticeable except for page loading speed testers.

CSS would still be separated into individual pages on the server.

True/False. Depending how you do this, you may be recharging the server a lot. If the server has to parse the HTML to load rules according to the content of the page, it may take lots of time and if you have many users it would get really bad.

...Or stored in a database. The same as before but with worst consequences if you end up doing many queries with non persistent connections. Not to mention many concurrent users.

The common consensus is to use external CSS because it benefits from cache mechanics, which of course, you have to configure on your server.

If you want to have the best of both worlds, set an inline style that helps render the basic outline of the page and the top content, the above the fold part and leave the rest as a linked resource.

Answer 2

The "general" rule of thumb which I see and understand it to be...

The main, global style is a external stylesheet that is linked to the whole site. While the individual "page fixes" such as small margin, paddings, and minor issues are within a tag to fix them.

When it comes to doing this in web design and web development, I was taught this way by my Computer Science Professor, and I teach people to do the same way for less confusion.

EDIT 1

I forgot to also say. When it comes to margin and padding fixes, one of my issues which I had to fix was lowering a table from a paragraph, which my global style doesn't need to do itself. It was just a situation in that page only.

Answer 3

You are forgetting one critical issue. CSS files can be cached. This means that there would be a significant drop in bandwidth usage using an external CSS file vs in the header. However, I do understand automation since that is the world where I live. Still, I do not insert style into the header ever except for tools that I create.

It may be that static style can exist within a style sheet and dynamically code driven style can exist within the header. This is one time that splitting the baby makes sense. Still, I have found that almost always there really is no real need for dynamic style and that changing a style element or creating a style element is so trivial that I prefer external style sheets.

Let me propose one more point. As far as search engines are concerned, they give not one whit about style but they do care about download speed. Adding inline style means that search engines are downloading style for each page that they do not need or want and consistently slowing your download speeds.