Stripes: refactor with CSS variables

Stripes are those little bands that we can see in many places on the street, often on signs but also in everyday places.

Creating this with CSS is not complicated, we are going to make use of gradients, but what I find really useful is the simplification and reuse of these with native CSS variables, also known as CSS Custom Properties.

Let's start

To create a box with stripes inside, it's as simple as generating a div with width and height (we give it width and height since it doesn't have any content, if it did it wouldn't be necessary):

<div class="stripes"></div>

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;
}

Then, to create the stripes, it's as simple as generating a linear-gradient that repeats:

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    45deg, /* inclination */
    black 0 15px, /* main color - breakpoint */
    #FFEB3B 15px 30px /* secondary color - breakpoint */
  )
}

I won't go into too much detail about what values can be assigned to a repeating-linear-gradient, but in this case we first indicate the inclination we want our gradient to have, then we tell it the main color (or initial color in any case) and the breakpoints we want.

In our example:

• Start with the black color at 0px and continue with the same color up to 15px
• From those 15px and up to 30px we assign the yellow color
• ...this repeats all the time completing the stripes.

And that's it to set up our stripes. But what if we want to have thinner stripes for example? or do we want them to have different colors?. Applying the BEM methodology, we could have something like this:

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    45deg,
    black 0 15px,
    #FFEB3B 15px 30px
  )
}

.stripes--thin {
  background: repeating-linear-gradient(
    45deg,
    black 0 5px,
    #FFEB3B 5px 10px
  )
}

.stripes--red-white {
  background: repeating-linear-gradient(
    45deg,
    red 0 5px,
    white 5px 10px,
  )
}

But doing this implies repeating the same properties in each modifier but with different values. This is where CSS variables come into play.

Refactoring with CSS variables

The first thing we will do is define the variables we will use and that will then be modified according to each case.

.stripes {
  --angle: 45deg; /* inclination variable */
  --color-primary: black; /* main color */
  --color-secondary: #ffeb3b; /* secondary color */
  --breakpoint-primary: 0 15px; /* main breakpoint */
  --breakpoint-secondary: 15px 30px; /* secondary breakpoint */
}

With this we already have our variables ready to use. In the definition of the variables, we are setting the default values. The next thing we will do is use those variables in our first stripe.

.stripes {
  background: repeating-linear-gradient(
    var(--angle), /* 45deg */
    var(--color-primary) var(--breakpoint-primary), /* black 0 15px */
    var(--color-secondary) var(--breakpoint
  ) /* #ffeb3b 15px 30px */
}

Obtaining the same result as before:

And from here on, everything is much simpler.
Now we will create our modifiers, but the only thing we will have to write will be the new values of these variables.

So, in the case of our stripe with thin stripes:

.stripes--thin {
  --breakpoint-primary: 0 5px;
  --breakpoint--secondary: 5px 10px;
}

And in our red and white stripe:

.stripes--red-white {
  --color-primary: red;
  --color-secondary: white;
}

And this is it!

Our final code

<div class="stripes"></div>
<div class="stripes stripes--thin"></div>
<div class="stripes stripes--red-white"></div>

.stripes {
  --angle: 45deg; /* inclination variable */
  --color-primary: black; /* main color */
  --color-secondary: #ffeb3b; /* secondary color */
  --breakpoint-primary: 0 15px; /* main breakpoint */
  --breakpoint-secondary: 15px 30px; /* secondary breakpoint */

  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    var(--angle), // 45deg
    var(--color-primary) var(--breakpoint-primary), // black 0 15px
    var(--color-secondary) var(--breakpoint-secondary), // #ffeb3b 15px 30px
  );
}

.stripes--thin {
  --breakpoint-primary: 0 5px;
  --breakpoint-secondary: 5px 10px;
}

.stripes--red-white {
  --color-primary: red;
  --color-secondary: white;
}

Here is the complete exercise on Codepen:

Conclusion

In the end, the good thing about CSS variables is that we only define the variables we are going to reuse and then we just have to call them and modify them, without having to rewrite over and over again all the properties that use them.

Thanks for taking the time to read, any feedback will be welcome :)

See you around.