loading...

My top 5 reasons why I like CSS custom properties

melnik909 profile image Stas Melnikov Updated on ・3 min read

The CSS custom properties spec changed my whole outlook on web-development. So I'd like to tell about 5 reasons why I like CSS custom properties.

What’s a custom CSS property?

In short, the CSS custom property is a property that was created by a developer. The browser knows nothing about it until a developer doesn't define it.

Declaration of any custom property starts with а double dash after which you have to add a property name. Then you should add а colon and set a value property.

For example, I create the —melnik909BrandColor property that has the purple value for the button element:

button {
  --melnik909BrandColor: purple;
}

The var function

The first feature of CSS custom properties is the var function. Using this function I can say to the browser so that he take a value of custom property and add it for any CSS property.

For it I have to define a CSS property and add the value of this property in which I set the var function with the custom property as an argument.

For example, I add the --melnik909BrandColor property for the border and color properties.

button {
  --melnik909BrandColor: purple;
  color: var(--melnik909BrandColor);
  border: 2px solid var(--melnik909BrandColor);
}

Custom properties can be changed right in the browser

Experienced reader who knows tools like Sass or LESS might say: “Stas, why should I learn CSS custom properties? I know Sass variables and it’s enough for me” .

Great note! The Sass or LESS variables help to organize CSS so that developers can easier maintain code. For example, I create the $melnik909BrandColor variable in which I've saved a brand color:

$melnik909BrandColor: purple;

button {
  color: $melnik909BrandColor;
  border: 2px solid $melnik909BrandColor;
}

After compaling I'll see the following code in the browser:

button {
  color: purple;
  border: 2px solid purple;
}

We see by this example that the Sass or LESS variables aren’t in the browser.

The second feature of the CSS custom properties is that they are in the browser. So I can change values right in the browser. For example, I change the value of the —melnik909BrandColor property for the hover state of the button element:

button {
  --melnik909BrandColor: purple;
  color: var(--melnik909BrandColor);
  border: 2px solid var(--melnik909BrandColor);
}

button:hover {
  --melnik909BrandColor: #27ae60;
}

We can use CSS custom property and media queries together

The third feature of CSS custom properties is that their values can be changed using media queries. For example, I define the melnik909BrandColor property to change the text color for the body element on different devices.

body {
  color: var(--melnik909BrandColor);
}

@media (max-width: 768px) {

  body {
    --melnik909BrandColor: purple;
  }
}

@media (min-width: 769px) {

  body {
    --melnik909BrandColor: tomato;
  }
}

The calc function and CSS Custom Properties

There are cases where we can use the calc function. For example, I like to do it when I need to control number of items in the row.

.child {
  width: calc(100% / 4);
}

.child {
  width: calc(100% / 3);
}

But this code is difficult to reuse and here the CSS Custom Properties will help us. We can create the variable that controls number of items. For example, I add the --itemsNumber property in the previous example.

.child {
  width: calc(100% / var(--itemsNumber));
}

And I define the values in the parent element.

.parent {
  --itemsNumber: 5;
}

/* or */

.parent {
  --itemsNumber: 7;
}

Customization of vector graphics

We have two ways to customize vector graphics using CSS custom properties.

In the first method, we define the fill, stroke and stroke-width attributes and add CSS custom porperties as values of them.

Now we can add values of attributes by setting values of custom properties:

<svg class="svg-with-attr" viewBox="0 0 55.867 55.867">
  <path 
    stroke="var(--iconStroke)" 
    stroke-width="var(--iconStrokeWidth)" 
    fill="var(--iconFill)" 
    d="...">
</svg>

Now we can add values of attributes by setting values of custom properties:

.svg-with-attr {
  --iconFill: #eeeeee;
  --iconStroke: #000000;
  --iconStrokeWidth: 1px;
}

On the left is the default icon without styles and on the right is the icon with styles.

In the second method, we define CSS custom properties for the stroke, stroke-width and fill properties using CSS rules.

body {
  --iconFill: #ffcc00;
  --iconStroke: #000000;
  --iconStrokeWidth: 2px;
}

.svg-with-props {
  stroke: var(--iconStroke);
  stroke-width: var(--iconStrokeWidth);
  fill: var(--iconFill);
}

P.S: I share tips, ideas, examples of my private projects on my Patreon profile. Are you interested? Join to us! 👇
https://www.patreon.com/melnik909

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform

Discussion

pic
Editor guide
 

I would like to mention, that with this script, custom css properties works in IE11
github.com/nuxodin/ie11CustomPrope...

 

You should definitively lookup Sass ;)

 

Have you read the article completely? CSS variables offer much more in-browser flexibility than a compiled SASS-to-CSS file ever will.