A Cooler Way to Set Style

Recently, I was reading a post about something or other where the content was unremarkable, but the author caught my attention with code like this...

1<div class="box" style="--t: 10; --l: 20">...</div>
2<div class="box" style="--t: 20; --l: 40">...</div>
3<div class="box" style="--t: 30; --l: 60">...</div>
4<div class="box" style="--t: 40; --l: 80">...</div>

What are these style attribute values?

It turns out that the author was setting variables with these values...

1.box {
2  position: absolute;
3  top: calc(var(--t, 0) * 1%);
4  left: calc(var(--l, 0) * 1%);
5}

In this case, the --t variable represents the top location of the box, and the --l variable represents the left. Both are transformed into percents.

Not a New Concept

After "discovering" the use of style attributes to set CSS variables (custom properties), I looked for articles from others on the subject, and many of you have been using style to update your CSS variables for some time. Ahmad Shadeed's (often referenced) article offers some use-cases for the technique. And @CSSense suggests some cool insights into the practice under the "Bonus points" section at the end of the article. Both are over 5 years old!

So why bring it up today?

First, I suspect there are others who are unaware of the technique.

Second, I think there are benefits to setting variables instead of actual CSS properties in the style attribute.

More Descriptive

Have a look at the following two HTML blocks. The first uses style to set a specific CSS property (order). The second sets a variable (--importance).

1<!-- using css styles -->
2
3  <div class="ordered">
4  <div class="bar" style="order: 2">Apples</div>
5  <div class="bar" style="order: 1">Bananas</div>
6  <div class="bar" style="order: 4">Cherries</div>
7  <div class="bar" style="order: 3">Dates</div>   
8</div>
9
10<!-- using variables -->
11    
12<div class="ordered">
13  <div class="bar" style="--importance: 2">Apples</div>
14  <div class="bar" style="--importance: 1">Bananas</div>
15  <div class="bar" style="--importance: 4">Cherries</div>
16  <div class="bar" style="--importance: 3">Dates</div>   
17</div>

Here is the stylesheet:

1.ordered {
2  display: flex;
3  gap: 1rem;
4}
5
6/* using the --importance variable */
7.ordered .bar {
8  order: var(--importance);
9}

Both produce the same visual result—an ordered list of fruits: bananas, Apples, Dates, and Cherries. However, the variable adds a semantic meaning to the element.

Instead of displaying the list in order, we could represent them in a bar chart...

1.chart {
2  display: flex;
3  flex-direction: column;
4  gap: 0.2rem;
5  .bar {
6    width: calc(100% - (var(--importance, 10) * 10%));
7    background: rgba(100,100,255, .1);
8  }
9}

Notice that in this iteration, we are using the --importance variable to calculate the element's width. The use of the variable is easier to understand than some width percentage.

[Link to a Pen where you can play around with these blocks]

Use in Child Elements

By using variables, we can use the value when styling child elements. Have a look at the following HTML element and associated CSS.

1<div class="veg" style="--color: green">
2  <div class="name">Asparagus</div>
3  <div class="desc">Stems</div>
4</div>

1.veg {
2  border: solid 1px var(--color, black);
3  .name {
4    color: hsl(from var(--color) h calc(s * .5) l);
5  }
6  .desc {
7    background-color: hsl(from var(--color) calc(h * .8) s l);
8  }
9}

Here, the parent's --color variable is used to set the color of the border, the text of the .name child element and the background color of the .desc element. Now - that is cool!

[Link to a Pen where you can see more .veg blocks]

Summary

I really like the possibilities offered by using variables in the style attribute and am looking forward to adding this technique to my development arsenal.

I mentioned this Pen before, and I offer it again as it includes a variety of uses of variables in the style attribute.

Here is another Pen where I show how to set CSS variables using JavaScript.