Some CSS tricks that Frontend itself may not know (Part 18)

Hello everyone, I am back and continue with part 18 of the series about some CSS tricks that Frontend itself may not even know.

Let’s get started!

1. Reduce the size of the code with CSS variables

I have previously mentioned the powerful features of CSS custom properties (aka CSS variables).

1. Discover the benefits of CSS Variables .
2. Some CSS tricks that Frontend itself may not know (Part 8) .

Today I discovered another good tip when using CSS variables that is to reduce many lines of code repetition, by changing the value of the variable.

The way it works is extremely beneficial for devs, whereas CSS preprocessors like SASS or LESS do not.

I will demonstrate its flexibility through an example of Grid System, more specifically Grid of Bootstrap everyone!

Here’s the way we often write (or often think):

(I’m just focusing on the main attributes.)

You see clearly, if you add some type of modifier for the grid types, the CSS code repeats quite a lot.

And this is how CSS variables overcome this drawback:

Awesome yet you! The CSS code has been greatly reduced.