Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

Recently we’ve made a big change to the way we write our CSS code.

CSS (Cascading Style Sheets) goes hand in hand with HTML. While HTML provides the rigid structure to a website, the CSS provides the visual style to the HTML elements, allowing you to colour, re-size, re-position and generally make a website look the way it does – CSS is the reason the internet looks so great.

The Problem

If you are coding CSS for hours on end however, you’ll begin to notice things. In its currently iteration (CSS3) it can take a long time to write code for deeply nested HTML elements. It’s also hard to re-use styles or colours for multiple elements or lighten / darken colours without getting out your colour picker tool.

The Solution

In looking for a solution to these problems, we discovered LESS – a extension of CSS allowing CSS code to include variables, maths and nested rules.

We started using it immediately and never looked back. That was in March and since then, every project we have built has used LESS instead of CSS.

The Good

LESS has been brilliant. It has enabled us to dramatically speed up our development of new projects meaning we can pass this on as a lower cost to our clients and customers.

We also really enjoy its ease of use and more natural feel – it’s just like CSS except it’s faster and more useful.

The Bad (but not that bad)

CSS can be read and executed by any web browser but LESS can’t. This point isn’t so bad however, as there are two ways of using LESS in a website:

  1. Add a bit of javascript into the head of the website that compiles any LESS code when pages are loaded. We don’t do this. To us this seems counter intuitive so save time in development only to loose some again in having a slightly slower page load – it isn’t optimal for performance.
  2. Write your LESS code and then pre-compile it into valid CSS using software. We do this and it’s by far the best, most optimised way of doing things. It allows you to save time in development, pre-compile the code into CSS that can be read by a web browser, minifies (compresses) it and then includes it in your website for you. Easy.

Summary

In line with our views on moving web design forward and progressing in the right direction, we now write LESS instead of CSS for all new projects. LESS rocks. It saves us time and allows us to pass those savings on to our clients and customers – everybody wins!