My New CSS Strategy

Feeds

Sunday, 19th August 2012

Up until recently, I have been perfectly happy cranking out CSS in any old text-editor. If it had syntax highlighting or colour swatches, all the better - but there wasn't really any part of the workflow to remove in order to make things more efficient.

The two big changes for me were responsive layouts and my CMS templates and I needed a slightly different solution for each.

Responsive Layouts

Responsive layouts can contain a load of sizes for different devices. It isn't too hard to calculate all the sizes manually and whack them into a bunch of media queries, but what is hard is updating them all later on when you want to adjust things.

Rather than manually maintain all these values, I implemented LESS and used variables and operations to make it easier to maintain the rules. You can read the documentation for the full details, but here is an example to get you interested:

@some_width: 920px;
#content { @some_width };
article { (@some_width - (@some_width / 3)) };
nav { (@some_width / 3) };

In this example, we work out the width of the article and navigation dynamically, so if we change the main width from 920px to 940px we only need to change one number, not 3 and we don't need to do any calculations.

So we make a reasonable saving for this example and an even bigger saving if we have multiple responsive sizes.

The best news is, I didn't even bother downloading a LESS compiler. I just added a LESS compiler into my CMS workflow and it compiles it and caches it on the server (so it doesn't have to be calculated every time).

CMS Templates

I very often spin up a website using an existing template I have created, but adjust the colours and images a bit. It allows me to get an idea online before I have spent hours coming up with the branding.

So I wanted an easy way to quickly change the existing CSS to make the website look different for the new idea.

Once again, LESS was very useful, as the variables can be defined up front and easily edited. If you have ever performed a "find and replace" to swap all instances of "#306FCC" with "#333", you can appreciate the ease of updating some tidily named LESS variables such as:

@theme_color: #333;
a { color: @theme_color; }

When you have used a theme colour in many places, it is quite refreshing to just update it in a single place at the top of a file.

But LESS wasn't the full answer. Ideally, I wanted to be able to swap various components of my CSS in and out of the design. Imagine going to the CSS factory outlet and grabbing the typography off of one shelf, the colours from another and the layout from another. This is what I wanted to be able to do.

So I separated out these components of the design into separate sylesheets for:

Typography
Layout
Colours
Images
Animation
Responsiveness

This means I can grab any combination of these six stylesheets from a collection that will build up over time and create very different looking templates for my ideas. For example, I could grab the cool big serify typography stylesheet, the black and red colour stylesheet and the two column layout stylesheet and have a site up and running instantly.

This isn't a new idea of course, but I have never really found a use for it until now. With the addition of another CMS workflow update to combine these stylesheets, run them through the LESS compiler, minify them and then cache the result, the combination of multiple stylesheets and LESS is very powerful.