Other questions explain custom properties and CSS variables, but what if we make it simple and say that custom properties are just here to allow us to add additional properties in addition to the default default CSS. Of course, the custom property alone is useless, since the browser does nothing with it, and why in 99% of cases they are used with CSS variables.
Another fact is that when we execute CSS, we will intuitively think about using the default CSS properties to do what we want, and when we are faced with a difficult situation, we will try to combine many properties, pseudo-elements, etc. in to meet our needs. But what if we think differently and we start using custom properties for this purpose? What if, instead of complex CSS code, we just write a custom property and implement the JS / jQuery code that will do the job for us.
Take a simple and general example. You have an element that you want to make absolute to use as an overlay of its parent element. With CSS, we will do something like this:
.block { height:100px; width:100px; margin:20px; border:1px solid red; position:relative; } .overlay { position:absolute; top:0; right:0; left:0; bottom:0; padding:5px; z-index:1; background:rgba(0,0,0,0.5); }
<div class="block"> <span class="overlay"></span> some text here </div>
This is pretty easy, and we can use the same class everywhere if we want to have the same thing. But we can consider a custom property that will reduce CSS code and simplify it:
$('*').each(function() { if ($.trim($(this).css('--overlay')) === "top") { $(this).css({ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'right': 0, 'z-index':2 }); $(this).parent().css('position','relative'); } else {
.block { height: 100px; width: 100px; margin: 20px; border: 1px solid red; } .overlay { --overlay: top; background: rgba(0, 0, 0, 0.5); }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div class="block"> <span class="overlay"></span> some text here </div>
I know the first thought: "Why use all this code for such a simple thing that we can do with CSS?" and "What if the property changes? What if the parent has an already established position?" This is true, but it is a very simplified example. Imagine you are creating a JS or jQuery library where you provide many custom properties for complex products (create common CSS forms, perform complex transformations where it is difficult to calculate values, etc.), and you provide documentation for each of them with its own corresponding values.
This is similar to the JS / jQuery library, in which you are invited to add a class to your element and call one function, and then you have a responsive slider, an interactive map, a Twitter widget, etc. Why not do the same with custom properties? We ask people to turn on the library and just write CSS and then see the magic.
We can also see this as an update, adding more useful features to make things easier. Just like the creators of CSS, BUT we do it on our own and don’t wait until a new specification appears and is approved.
Take the flexbox example. Before flexbox, if we want to have N div numbers inside a container with the same size and fill the entire container, we are required to write complex code that we have to configure every time we add a new element. Now with flexbox we just install flex:1 and that! The browser will do everything complicated for us.
We can do the same. We create our custom properties to simplify the work, and we will share it with the community. People will start using them and may find them useful, then they can become a reference to common problems. Perhaps some browser will even think about an implementation for their integration.
Thus, custom properties can also contribute to the extension of CSS.