CSS constants/variables with SSI: CSSI!

Dave Everitt 1 September 2008, last updated 04-Aug-2013

After working on a WordPress-based site with crazy long CSS, I thought how good it would be to have (at least) all the CSS colours stored in variables (constants?) in a single file, so you could change every instance throughout a site, across multiple stylesheets. So I posted a message to the Transcending CSS Facebook group.
Update: if you want more than to store a few CSS variables, you can take a look at SASS, LESS or Less.js, which are designed to do this and more. SSI is still a nice simple solution, but they are implementations of the whole 'programmable CSS' thing.

Andy Clarke replied with a link to Rachel Andrew's article on using PHP and there's also Davis Walsh's CSS Variables using PHP, but PHP seemed like overkill for such a simple task, so I had a chat with my friend and co-developer Ben Daglish, who suggested using Apache's SSI (Server Side Includes). SSI means that Apache itself does the server-side processing, so no scripts are necessary. He left it with me, and the result is… it works!

Enable SSI for .cssi files

If you have control over your Apache setup, make sure SSI is enabled in your Apache config (.shtml is the usual extension) - this is covered exhaustively on the web.

Add a new Apache 'Directory' directive as below for your styles directory:

<Directory "/users/you/webite/domain/html/styles">
  AddHandler server-parsed .cssi
  Options Includes
</Directory>

'AddHandler server-parsed .cssi' tells Apache to find files ending with .cssi and process any SSI instructions they contain. We could have given them any unused extension, but .cssi indicates that they're mixture of CSS and SSI. 'Options Includes' simply allows SSI within this directory.

If you don't have control over your server setup, ask your provider to: "enable SSI in my 'styles' directory for files ending .cssi". Apache shouldn't process all .css files, so the .cssi extension enables the server to target just those using SSI in their CSS.

Create SSI-enabled CSS files: an example

1. create a .cssi file with all your site's colours (say "colors.cssi") or any other CSS that's duplicated throughout your style sheet:

<!--#set var="mybackground" value="#303" -->
<!--#set var="mycolour" value="#303" -->

2. Include "colours.cssi" into your main stylesheets (or just add the variables to the top of a single stylesheet), then echo the variables whenever you need the colours:

<!--#include file="colors.cssi" -->
body { background: <!--#echo var="mybackground" -->; }
p { color: <!--#echo var="mycolour" -->; }
.someclass {
  padding: 0.5em;
  background-color: <!--#echo var="mycolour" -->;
}

3. now you can change the colour values in colours.cssi (or at the top of your single .cssi file) and have these changes appear in all the stylesheets that use these variables.

Comments:

From: Matt, Wed Jul 28 16:34 2010
Thanks for the nice, encapsulated description of how to do this. Wasn't easy to find this page, but I appreciate you putting it together!
I haven't experimented with this yet, but have an important question about how this affects the "last modified" HTTP header delivered with the file to the browser - is the date passed to the browser requesting the file the same as the last modified date of the .cssi file itself, or is it the date on which it was processed (ie the time of the HTTP request, meaning that cached versions will always expire? If the latter - any control over that to change it and make it the former?

From: BJ, Tue Dec 14 11:28 2010
Thanks for this.
I am a n00b to Apache related things, but have knowledge of CSS and Javascript. Does this allow for dynamic colour switching with Javascript by simply changing the value of said variables?
My gut says no, but it's worth an ask as I can't test it right now.
Thanks again, very useful info.

From: BJ, Wed Jan 5 14:16 2011
THANK YOU!!
I finally got this working and as noob to all things server related (various web design experience, but never had to manage a server before), this post was a god send.
I had to use an .htaccess file to get it to work as I don't have full apache control. For anyone in a similar situation, I used this .htaccess file:
AddType text/html .cssi
AddHandler server-parsed .cssi
Options Indexes FollowSymLinks Includes

From: Dave Everitt, Thu Jan 6 14:57 2011
@BJ: glad you got it working - I find it's good for simple variables like the color property. Whereas less.js offers much more, sometimes you don't need all that functionality. As for the Javascript, that should still work, because it manipulates the rendered code, and not your .cssi source.
@Matt: good point, and I promise to get back to you with a definitive answer, once some annoying paid work is out of the way!

From: Ruth, Mon Aug 20 15:06 2012
I also agree that it is not good to be loading PHP for every style sheet. If you load one PHP page with two 'dynamic' style sheets, that's 3 PHP calls for every loaded page, for every visitor. That will add up real quick if/when your website starts to pull traffic. The best thing to do is leave the stylesheets static. If you need to add dynamic style information, include it in the actual web page in style tags. Cigraphics is on the right track for re-generating static style sheets when changes are made to the website, but then you have to worry about browsers caching their CSS sheets because they are expected to be static. I know there are workarounds for that, but why worry about it? Just include any dynamic content in the main web page.

Add a comment…

Comments (2000 characters/300 word limit) appear after approval. Add your email if you'd like a reply (it can be entered safely and won't be published, stored or spammed).

Name:
Email (optional):
Comment: