How CSS Preprocessors Changed The Way We Code

Preprocessors aren’t without their critics, though, with some sections of the developer community keen on pointing out their potential to lure programmers too far away from pure CSS and adding an additional layer of complexity.

This post sits firmly on the other side of the fence, because we’re going to look at what we believe to be some of the key reasons preprocessors have changed the way we code.

A preprocessor is a program that can take one type of data and convert it into another type of data. Used most commonly with HTML and CSS code, preprocessors compile code written in a processed language to pure syntax; in effect, they extend the base language. They offer the following benefits:

• Ability to define variables
• Mathematical functions
• Operational functions (such as ‘darken’ and ‘lighten’)
• Nested syntax
• Ability to join multiple files

Here’s an example of nesting in action:
 

body {
    .header {
        h1 {
            font-size: 20px;
        }
        h2 {
            font-size: 16px;
        }
    }
}

The above uses the Less preprocessor syntax and demonstrates a cleaner way of targeting DOM elements within CSS code. A big advantage of Less is that it uses a CSS-like syntax, so it’s easier to learn. Selectors don’t need to be re-written multiple times and the time taken to make changes to style sheets is reduced.

When compiled, the Less syntax above will translate into the following valid CSS:

body .header h1 {
    font-size: 20px;
}
body .header h2 {
    font-size: 16px;
}

So, if the ‘header’ class needs to change at all, it only has to be updated in one location instead of having to search the entire stylesheet for any occurrences.

If you’re unsure about using preprocessors, we’ve picked out 5 of the best reasons for adding it to your development toolbox.

It Stops Us Repeating Ourselves
When learning to code, programmers are taught not to write anything more than once. ‘Don’t repeat yourself’ is the mantra any good coder lives by.

CSS in particular causes problems when it comes to repetitive code; think about how many times you’ve added in the same font weights, sizes and families, line after line. With preprocessors, you only ever have to type them in once and simply refer back to the containing style element when needed. Equally useful is that you can refer to colours using variables instead of copying and pasting hex strings throughout the file.

It Keeps Our Code Organised
Although tidy code doesn’t necessarily perform better than messy code, it’s an awful lot easier to maintain and work on in teams. Preprocessors force us to keep our code tidy and organised, and that’s a very good thing indeed.

It’s Simple To Set Up
If you’ve been put off using preprocessors due to the perceived time it’ll take to get them set up, there’s good news; preprocessors are surprisingly easy to configure and start working with.

Gives Us More Time To Experiment

With less time spent writing and sifting through messy CSS code, developers can invest more of their day in experimenting with new coding practices and properties that will result in a better, more attractive website or web app overall.

Perhaps you’ve been wanting to delve into the exciting stuff CSS3 offers but have been prevented from doing so due to the amount of time spent on dealing with unwieldy code. Preprocessors give back your most valuable asset – time.

It Has Placed A Greater Emphasis On Frameworks

Frameworks and preprocessing languages go hand-in-hand. Both are capable of doing an enormous amount of heavy lifting and that’s attractive to any programmer. Frameworks should absolutely be used in software development and preprocessors encourage coders to include them in their tool belts.

Preprocessors are often discounted for being ‘just another’ technique for programmers to learn. As a result, they can be unfairly overlooked for having too steep a learning curve, but we hope this post has gone some way to proving that not to be the case.

Who wouldn’t want their code to be cleaner, easier to maintain and capable of saving valuable time? For those of you that are interested, there are two CSS preprocessors that are most widely used among developers today – Less, which we’ve mentioned, and Sass. Sass is generally regarded as being a bit better in terms of features, whilst Less is easier to integrate into build processes, as Sass relies on Ruby.

So if you haven’t already, give preprocessors a try!