Un-Bloat your CSS

When writing code of any kind, it is extremely easy to end up with documents full of repetitive code. This is especially true for newbie developers, especially as apps continue to scale in size. The results are large documents that contain a ton of repetitive code. Larger files can slow down the load time of your website or application, and — most importantly — they are often very difficult to understand when they are reviewed in the future by you or other members of your development team.

One area where repetitive code seems to occur the most is in CSS files. If you are anything like I was when I first started my coding journey, I am sure that you often find that your CSS contains a lot of different styles that are basically repeats of previous styles. This is referred to as CSS Bloat. Your CSS file is ‘bloated’ with extra, unnecessary code that you could refactor to a more condensed version and still end up with the same results. Even now, after I finish coding the CSS for my apps, I am still able to go back and refactor it to clean it up.

This concept illustrates the WET/DRY coding concept quite well. WET code is an acronym for ‘Write Everything Twice’ (or thrice… you get the picture). It refers to repeating the same code multiple times in your application, which results in bloated files. This is opposed to DRY code, where DRY is an acronym for ‘Don’t Repeat Yourself’. To accomplish DRY code, the goal is to write the same code as few times as possible, in a way that it can be used as many times as needed to accomplish the given task. For instance, in JavaScript, you could create ‘helper functions’ that allow you to call the same code multiple times and produce desired results based on the arguments that you pass to the helper functions.

When it comes to CSS, you can also write code that can be reused for different elements. Let’s say, for instance, that we want to create six different boxes on our document: we want to have a red box with a border, and one without a border, a green box with a border and one without, and a blue box with a border and one without. At first thought, you might think that creating six different elements is the best way to accomplish this, and your code might look like this:

Here, we have a unique CSS class for each element we wish to style. In this case, we would end up with 6 different CSS classes, each repeating a lot of the same properties.

And the HTML would look like this:

Each element would define a class attribute corresponding to the style properties we want to apply.

This would render results that look like this:

Our colored boxes, rendering just as expected!

There is nothing wrong with the above code — it accomplishes the task of styling the six boxes just fine. However, we do have six different CSS classes that, for the most part, repeat themselves. This is referred to as WET code, and CSS Bloat. Right now, it may not seem like a big deal, but imagine what this CSS file could look like if we do this for 100 boxes, or 1000 boxes.

A better way to accomplish the same result would be something like this:

The same job — with 1 less class and DRY-er code!

And the corresponding HTML:

To add multiple classes to elements, we simple add a space between each element.

Here, we have just five classes, where none of the styles are repeated, and each class has an easily identifiable name and handles something very specific. This code is much DRY-er, and it achieves the exact same result.

This code will be a lot easier to work with and understand in the future when you go back to review it or when other developers need to look over it.

There is yet another handy way that we could refactor this code to make it just a little bit simpler. This is thanks to CSS3’s ability to create custom CSS variables. Rather than defining the background-color property three different times, we could define it just once in the .box class and use a custom variable to set it. Here’s an example:

CSS Custom Variables make life so easy! Look: now we only need four classes!

And the HTML would look like this:

We don’t need to define our ‘default’ color, since this is what will render if we don’t pass the custom variable through!

In this case, we only need to declare 4 CSS classes, since we are using CSS custom variables and setting the default color to red. The default color is declared in case the --background-color variable is null or is not specified. This allows us to only declare the classes that change the default box — which is defined as a red box with no border.

By un-bloating our CSS in one of the two ways illustrated above, we are not only writing DRY-er, leaner code, but we are also allowing for much easier future flexibility. For instance, if we wanted to add a new box to our document that had an orange background, all we would need to do is create a class called .orange and set the --background-color custom variable to orange.

Hopefully, you found this topic interesting and helpful. Happy coding!