Thoughts about React,Web Development,Performance

June 14, 2021

Inline CSS Variables

Giovanni Benussi

CSS custom properties, aka CSS variables allow us to define custom properties, or variables, to use in our CSS.

Let's say we want to define a custom color for a button. We could use the following CSS:

.custom-button {
  /* Other styles ommited... */
  --background-color: #bfdbfe;
  background: var(--background-color);

With the following HTML:

<button class='custom-button'>Click Me!</button>

It produces:

You can update the custom property by using inline styles:

<button class='custom-button' style="--background-color: lightgreen">Click Me!</button>

This could be very useful in some cases. For example, you could have a grid component and you may want to specify the number of columns and rows with CSS variables:

<div class="grid" style="--columns: 4; ---rows: 8">...</div>