How Jojo handles CSS

Jul 20, 2007

Jojo has a fairly unique way of handling CSS files, and we think this is one of the features that makes us different from the other gazillion CMS systems available out there.

What makes for good CSS handling?

When we talk about CSS handling, we are looking at what is best for the user, the developer, and us, Jojo developers.
  • The end user wants it to be fast. Other than that, they don't really care.
  • The developer wants it to be easy to manage.
  • The Jojo team want to make sure that the CSS for any given plugin is totally separate from the main system - we want plugins to be easy to drop in and out, so they need to be fully self-contained. Also, if you aren't happy with the CSS that a plugin provides, you should be able to override it with your own styles.

Maintenance of CSS files in Jojo

Jojo is almost entirely broken up into plugins and themes. Most of Jojo is actually a plugin, called jojo_core.
Each plugin can have it's own CSS file(s), which is kept in plugins/pluginname/css/style.css - this way, the CSS, templates, PHP code and images for each plugin or theme are kept in one place, making plugins and themes easy to share and easy to install.

Looking to make some changes to the CSS for the forums? Chances are you will find that code in plugins/jojo_forum/css/style.css
Want to add a printable version of the forum CSS? Create a new file called plugins/jojo_forum/css/print.css

This approach makes CSS fairly easy to manage, with the CSS broken up into logical blocks.

Speed

But having CSS broken up into lots of little chunks is a performance problem. Every CSS file that is linked to in the browser is an extra HTTP request, which makes the site a lot slower when you have 10+ plugins (and therefore CSS files) on your site.

To avoid this issue, Jojo automatically combines all stylesheets into a single file, saving many extra HTTP requests and therefore improving performance. This file is called www.domain.com/css/styles.css

As far as the user is concerned, they have just requested a plain old CSS file. Who would have guessed they just called a PHP script which assembles 10+ files into one. This fits well into our vision of producing a CMS that looks exactly like a static site. If people looking at our source code can't guess that a site is based on a CMS, then we have done our job well. Logical names for CSS files is one part of this.

Optimisation

So while we were squashing 10 files into one, we wondered what other ways we could make the CSS faster. One thing that came to mind immediately was to optimise the code itself. eg...
#menu li {
border: 1px solid #cccccc;
font-weight: bold;
padding: 0px;
}

By making some basic changes to the code, we get the following...
#menu li{
border:1px solid #ccc;
font-weight:700;
padding:0;
}

This is 16 bytes smaller, simply by removing whitespace, shortening color codes, and other changes that have no visible impact. Over the course of a whole CSS file, this can reduce the size significantly (depending how efficient your code is to begin with).

Then we started getting complicated

So there I was smugly thinking I had done a good job of squashing the CSS nice and tight, and Mike comes along and does another round of optimisation on the CSS.

With cascading style sheets, the cascading nature of things means you can define a style and then overwrite it again somewhere else. This makes CSS a real treat to manage, because you can set defaults and then change your mind for specific instances where you need something different. But if you are defining the same attribute in many places, which can happen when plugins all compete for the same styles, it leads to a fair bit of duplication.
Jojo now runs through the CSS and removes any declarations it thinks are duplicate. Surprisingly, this can sometimes save 1.5 - 2kb of extra code. This all makes the ship go faster.

GZipping

After joining and optimising your CSS, we Gzip it to compress it even further. To illustrate the savings that ate available, the CSS for the Jojo website is taken from 13kb uncompressed to 3kb compressed.

Caching

The hard part about working with dynamic CSS files is that the correct cache headers need to be sent so the browser will cache the CSS. With the Jojo system, all modern browsers we tested will cache the CSS correctly. We try to pretend that we are serving a static file, so that browsers will treat it like a static file.

We like it.

We think the CSS handling in Jojo is up there with the best. It's fast, easy to manage, compresses automatically, caches on the client and server, and to the end user, looks just like a static file.

All the more incentive to go nuts with your CSS code and try to get the HTML as lean and mean as possible.

Tags: cssjojo featuresjojofeatures

Your Comments

post a comment