First, a word of warning: This article deals with ExpressionEngine and its built-in tag system. If you don’t know much about ExpressionEngine, or want to know more, then your best bet are Ryan Irelan’s screencasts.
If you don’t want to know more, well then we don’t have anything against you; you just hate Ryan Irelan, who has done nothing but awesome things for you lately. Some of which we’ve already endorsed here, heartily.
Seeing as we’re of the sharing-lot here at the Bluequarters, I thought I’d relay a problem I recently encountered involving multiple CSS files in the ExpressionEngine administration panel — specifically BlueprintCSS. First, let’s discuss how ExpressionEngine’s admin interface interacts with these templates.
How ExpressionEngine links to stylesheets, etc.
In ExpressionEngine, you have the ability to copy and paste your CSS files into a template, and use Expression Engine’s built in tagging system. Using the example on the ExpressionEngine website, you include a stylesheet with the link element and the stylesheet tag:
<link rel="stylesheet" type="text/css" media="all" ↵
href="{stylesheet=weblog/weblog_css}" />
This link will not run the stylesheet through ExpressionEngine’s PHP parser and the page will load quicker.
The dilemma: Too many files
One thing I love about Blueprint CSS is that it divides up the CSS files by category. For example, typography can be discovered under the name typography.css. What a concept! This is fantastic for building a website, but it's not so fantastic when you have multiple stylesheets running through ExpressionEngine's admin interface. It's especially not fantastic when you have multiple @import commands in a stylesheet that completely trash ExpressionEngine's flexibility.
So Blueprint (which uses multiple CSS files) becomes a gigantic pain in the ass. Here, however, are several solutions I’ve come up with:
Solution 1: Don’t put CSS template EE tags at all.
This is pretty simple. Instead of putting {stylesheet=weblog/weblog_css}, just put /stylesheets/weblog.css. This will act like a normal CSS file, and will work as a normal stylesheet would. As long as you have a folder on the root of your server named stylesheets, the browser will go through and fetch all the @import commands, etc.
Solution 2: Use the {path=weblog/weblog_css} tag.
This allows you to manage all Javascript/CSS files within ExpressionEngine’s Admin Panel. It also allows you an amount of flexibility in stylesheet content.
This was a solution I used. In order to take advantage of all of the stylesheets available, I placed them in a template group called “stylesheets”, and in my header put {path=stylesheets/screen.css}. This fetches the main Blueprint CSS file, within which I placed the following: @import {path=stylesheets/typography.css};.
What’s the advantage? Because the files are parsed by ExpressionEngine tags, you can pass in {title} variables next to a class name (e.g. .img_{title}), and have a CSS rule that changes based upon the article the user is viewing. You can have your CSS rules change on the fly, just like you would a normal template, and have ExpressionEngine parse the variables and replace them with a context-based value.
But there’s a catch: This is not a good practice for a large scale site. With EE caching you can tone down the amount of loading, but having EE parse a bunch of files constantly is generally not a good idea. It should be able to handle the load once it caches everything, but reloading a stylesheet and a page every-time is not the best idea. Be selective in how you use it, but use it for great effect.
Solution 3: One sheet to rule them all
All you have to do is copy/paste all the imported files content, includes, etc. into one gigantic javascript or CSS file and plug them into ExpressionEngine. This becomes unmanageable with scale, but if you’re building small at first, then it’s not a bad idea. However, it’s not very Web 2.0 of you to think big… I hear Google is still buying.
And that, as they say, is that.
So these are just some rough ideas I haven’t explored too deeply yet, but I’ve figured out a way to load all my files into ExpressionEngine for management. Whether or not that’s bearable for you is another question completely.
This is one of major weaknesses in EE. Guys from EllisLab should consider this issue so we can all easily manage multiple css files from EE admin.
Probably a silly question, but why not just upload the CSS files to the server manually?
I don’t let EE touch my CSS files, makes life an awful lot easier and I just access them as I would on a static site.
@Kevin,
This article was missing half of its content due to a Markup language error. I have since corrected the problem, but including static CSS files is now in there.
Ahhh, no wonder I was confused. :)
Thanks for the clear-up!