Keeping it Clean with CSS Variables

CSS can be inherently easy for some while for others it is very difficult. It often gets written off as being "not a real Coding language," purely on the fact that people don't like having to struggle with something they see to be "easy". The reason I've gotten into writing posts on CSS is to make it more familiar and easy for everyone. This post is one of many out there talking about keeping code clean. So why is it important to keep your CSS clean and how would using CSS variables help? First, let's look at why it's important to keep any code clean: A) it's easier to read and B) helps new developers coming on to a project be able to learn what's going on just from reading it. Next, Why CSS Variables? Well, they are versatile: allowing easy and efficient global updating, CSS variables are available to be updated via Javascript interactions, and they make readability of the code quite easy. The main focus will be on learning CSS variables, so let's get into the nitty-gritty.

Defining CSS Variables

Initially, you need to define the value within a parent element. Placing the variables within the root element will allow you to have access to all children tags and classes. In defining the variable, you can assign reusable values or use the variable in reference to the parameter such as "margin" or "height". Most commonly you define variables as reusable values as you can see below:

:root {
    /*  Primary Colors */
    --primary-color: #3c2951;
    --primary-69: #8760af;
    --primary-96: #bd86f4;

    /*  Grey Scale   */
    --grey-84: #d5d4d6;
    --grey-96: #f4f4f4;

    /*  Font Size */
    --small: 14px;
    --medium: 24px;
    --large: 32px;
}

The ‘var()’ function is used very much like a callback in javascript, in that it calls for the specified value and returns it to the style. The below image illustrates how a developer would call to get its value.

.Main__header {
    align-items: center;
    background: var(--primary-color);
    color: var(--grey-96);
    display: flex;
    height: 3em;
    width: inherit;
}

So, Why use CSS Variables…?

DUH, because they are ‘so fresh and so clean’, if I can quote OutKast for a moment.

The most valuable aspect of CSS variables is their ability to be reused, allowing global updating to be quick and efficient. How is this efficient? When writing css you may have a main theme color and without the use of variables, you would need to search the entire project for everywhere you used that color to update, which is pretty inefficient if you as me. Using variables also drastically cleans up your CSS code, and keeping your code clean produces consistency. Using generic but descriptive names, when naming your variables also helps. Specifically, when naming colors within a theme, naming your main color to “primary,” says this is my main color, then if you have variations on the same color you would append a value percentage such as “-96” to denote where it lives on the value scale. However, if you have a color completely different from the primary but is still in your main theme, you may want to use the name “secondary” or “highlight”, using a similar value numbering scale if you multiples in the same range.

Below is an example all the code put together:

:root {
    /*  Primary Colors */
    --primary-color: #3c2951;
    --primary-69: #8760af;
    --primary-96: #bd86f4;

    /*  Grey Scale   */
    --grey-84: #d5d4d6;
    --grey-96: #f4f4f4;

    /*  Font Size */
    --small: 14px;
    --medium: 24px;
    --large: 32px;
}

.Main {
    background: var(--grey-84);
    height: 95vh;
    padding: 0;
    margin: 0;
    width: 100%;
}

.Main__header {
    align-items: center;
    background: var(--primary-color);
    color: var(--grey-96);
    display: flex;
    height: 3em;
    width: inherit;
}

See the Pen CSS Variables by Ren Estep (@ren_estep) on CodePen.

Another key factor for using CSS variables is that if you are updating styles in your Javascript, you can just target these variables directly. How cool is it that?

Why is it Important to Have Consistency in your CSS Code?

Having tight and clean code is important to the organization and the efficiency of your project. Keeping clean coding practices in mind while writing your project can lessen the technical debt, by having consistent global updates via the design process. Also, consistency will accommodate growth and hinder code creep.

One Important Question you Should ask is “Can I Use This?”

Most major browsers with stable current versions allow for the usage of CSS variables with the exception of IE 11. (But don't fret, there are polyfills to workaround usages issues... post your fave in the comments)

As for use in conjunction with mobile devices, the most commonly used browsers allow for the use of CSS Variables:

Just remember that it is important to get a list of the most common browsers that your software will be used on, so you’ll know if you need backup code for a special use case. This would also be something that you would consider when deciding whether to use a preprocessor framework such as SASS or LESS rather than straight CSS.

And Finally…

Writing CSS is something that takes practice, but taking the time to learn elements such as CSS variables, naming conventions and getting critiqued, have all helped me become more in tune with keeping my CSS cleaner. It is my hope that sharing this knowledge will help others who are struggling, are just starting to learn, or just need a little refresher.

Thank you for reading!