Importance of variables

We all know the feeling when you get a legacy project to work with. You are hoping that the previous developer followed the best practices or had similar way of doing things as you do. In an ideal world there’s someone around to give you the handover or some documentation, but you are still hoping that the project is clear and easy to read.

We all also know the feeling when we open the project and there’s pixels mixed with points or 15 different paragraph values (of what we can quickly see) and we dread to check the project any further. Usually at this point the style guide (if there ever was one) is also already out dated and doesn’t help in letting you know which font size to use and which to ignore.

This isn’t only a “legacy project” problem. I’m sure you have all been in a situation when the site is nearly finished – and then the customer wants to change the font size. Or the color shade is a tad off. If you at this point haven’t used variables, you need to change all occurrences of these values manually.

Now, what could variables do to help you?

Variables are used to store the changing data in one place where it’s easy to be changed. Especially nowadays with tools like SASS, there are often multiple files containing the CSS and browsing trough all of them is extremely time consuming. If you however create a variable file where you store all color codes and font sizes and so on, it will make your job a lot easier.

To mention a few of the benefits of storing the variables in one place;

But if I just wanted to tell you to create a variables file, it hardly would be worth a whole blog post. As important to having the variables are to use them in a way that enables change to be possible.

Imagine that you have a blue color in a variable, let’s say $blue: #0000FF and you use this $blue all trough your files. Text is $blue and background is $blue and links are, surprisingly, $blue. Now, let’s say that the customer wants to change links to $green. You would have to search to all instances of $blue, determinate if it is a link or not and then if needed, change the value. Sounds like fun, right?

There’s an easy way to prevent this, which might seem a bit redundant at first.

What we could do to solve this is that we could create separate variables for separate elements. Links would be one, text would have it’s own and so fort. This might look something like this

$blue: #0000FF;
$green: #00FF00

$text-color:  $blue;
$link-color: $green;

Think how easy it now is to change for example the link color back to blue or to create a new base color value for it. If used properly this would now change the link color in mere seconds trough out the site. This is especially handy when the customer changes their visual guide lines and wants a small facelift on their website.

Using variables can also help you keep your code intact. You can easily see, when for example color codes or font sizes are starting to get out of hand. If you have variables such baby-blue, blue, light-blue, dark-blue or every font size from 12px to 40px it’s time to say to the designers that enough is enough. One solution could be to check how many different variables are used and compromise on the most used ones. One good way to do this is running grep -or "font-size: 10px". | wc -l in your css folder. This would recursively count all occurrences of the value ‘font-size: 10px’ in your code. You can read more about grep commands here.

All in all variables will help to keep your css files easy to modify and maintain.

Thoughts by