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.
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:
And the HTML would look like this:
This would render results that look like this:
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:
And the corresponding HTML:
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:
And the HTML would look like this:
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!