The benefits of using CSS preprocessors

If you've spent time working with CSS, one of the first questions you may ask yourself is "Why do I need to use a preprocessor?" It's a valid question and you certainly won't have been the first person to ask this either! Let me explain this in more detail.

CSS is known as a declarative language—this means that the rules we use to declare what happens to an element will be the rules that the browser uses to paint the results on the screen. If, for example, we want a block of text, such as a printed comment, to be in italics, then we will use something akin to the following code:

.comment {
  font-style: italic;
  font-size: 12px;
}

The browser will then render this on the screen in 12 px italicized text.

This example is very straightforward—it could be used anywhere. The trouble is, we may need to specify the same styling attributes elsewhere. We could use the .comment class, but what happens if we want to change the size? Or, perhaps render the text in bold instead?

Changing the style rules to suit one element could break them for the original element, which is not ideal. Instead, we will need to create multiple style rules that apply to specific elements, but which duplicate this code—this could make for very verbose CSS! Just imagine that we end up having to create a selector such as the following:

.article #comments ul > li > a.button {
...some style rules...
}

This isn't an easy selector to understand, let alone apply styling to, right? We can eliminate this issue of duplication using Less—it is possible to set one style block at the start of our Less style sheet and then reuse this style at every instance in our code, in the same way as you might use the autotext function to add predefined text to a document in Word, based on a key phrase. If we make a change, we only need to do it once—Less will automatically update our code, avoiding the need to do it manually. Imagine doing this for the dozens of buttons you might have on an e-commerce site and the benefits will soon be apparent!

This might come across as an alien concept in CSS—after all, I am sure we are used to writing code manually and spending many hours perfecting it. You might well have some misgivings about using a CSS preprocessor to take out some of the grunt work, particularly as it is satisfying when you manage to achieve that stunning piece of CSS artwork for a client. It's perfectly natural—let's take a moment to consider some of the common misgivings about using CSS preprocessors.

Why not just write normal CSS?

Many people will often ask, "If we're producing CSS, why aren't we just writing it instead?" It's a common reaction; after all, we use CSS every day to solve any layout problem thrown at us while building beautiful responsive sites that work in any browser. The last thing we want is to not look like we know what we're doing, right?

Let me be clear from the outset: the purpose of using Less is not to write better CSS. If you don't understand how to use CSS now, then Less won't help you fill that gap. What it will do is help you write CSS faster and more easily, while making your style sheets more manageable at the same time. Let's explore some of the reasons why we should switch to using a CSS preprocessor, such as Less, in more detail:

• CSS preprocessors, such as Less, don't break browser compatibility—each CSS preprocessor produces valid CSS
• CSS preprocessors help to make our CSS DRY (Don't Repeat Yourself)—we can create variables from reusable CSS properties, which helps us to make our code more scalable and manageable, as we can break it down into smaller files that automatically compile into one larger style sheet
• CSS preprocessors, as we'll see throughout the book, contain some useful features that help remove some of the tedium that frequently appears when writing CSS styles, by automating some of the low-value tasks that have to be performed
• We can take advantage of the nesting capabilities of CSS preprocessors, which leads to a more natural style of writing, where we can use a form of shorthand to produce the desired effect

Now that we've explored some of the advantages of using a CSS preprocessor, let's delve in and get acquainted with Less for the first time. We'll go on a whistle-stop tour in order to give you a flavor of what to expect in Less. Don't worry if you don't understand it just yet; we will cover everything in more detail throughout the book.