Or to put it another way, how you can teach an old dog new tricks.
One of the perennial “issues” in web development is code management, whether in your HTML templating, Javascript objects or – increasingly – CSS rules. Inheritance and specificity of styling declarations are tricky beasts to control and historically there has been no dynamism in the language so a common background colour, for example, must be defined every time it is used.
On a recent project, one of our developers suggested using Less, which is a new way of writing CSS that takes care of the kind of consistency problems than can often creep into a complex build.
Although the end result is the plain, static CSS we’re all used to, with Less the creation of it is quite different due to the availability of variables and functions to centralise commonly used rules and automate otherwise long-winded declarations.
So for example, a developer can set a site’s theme colours as Less variables and then call on them later in the stylesheet.
@green: #8ECC22;
@orange: #FF9F06;
@blue: #005799;
@pink: #D71D5D;
@grey: #434343;
Followed by
h2 { color: @grey; }
div.disclaimer { color: @grey; }
Which, as you would probably expect, results after compilation in CSS rules of
h2 { color: #434343; }
div.disclaimer { color: #434343; }
Naturally this is a simple example, but when you start getting into the functions and rule nesting of Less you see how powerful it can be. Nesting is particular useful, as something like:
div.solid {
width: 308px;
h2 {
line-height: 20px;
}
}
outputs as
div.solid {
width:308px;
}
div.solid h2 {
line-height: 20px;
}
So not only is inheritance automated, but as a developer you can also more easily see which rules are grouped and related.
A compiler app for Mac OS makes it easy to have a continuous build of the Less files during development, and can output a minified version for production. There are also command-line tools and Javascript dynamic compilation for use in-page so however you prefer to fit it into your workflow there is probably a way.
I have to admit that as a developer somewhat set in his ways I was slightly sceptical about the value of doing Less, but having seen it in action I’m pretty much converted. I do have a couple of reservations – over-reliance on nesting can generate very verbose and unnecessarily specific rules – but on the whole this does seem like a useful tool to streamline CSS authoring and make for easier collaboration and re-use.
