Global CSS Variables VS Local Variables in Terms of Efficiency

Effect of Many CSS Variables on Performance

Yes there are tests that have been done. Essentially you apply the CSS changes via JavaScript and measure the performance.

You will want to learn about scoping your CSS variables and the number of affected elements. As these numbers increase, so does your draw time.

There is a handy article on this subject at https://lisilinhart.info/posts/css-variables-performance/

TL;DR
be aware of style recalculations, since CSS Variables are inheritable — changing a variable on a parent can affect many children
prefer using single classes for elements to make style calculations easier for the browser
calc() has good performance with variables, but still has problems with browser support with certain units like deg or ms
prefer using setProperty rather than inline styles to set CSS variables in JavaScript

And another quote:

Via Javascript the --bg variable was first set on the .container parent element, which resulted in a fairly long duration of 76ms. Then the same variable was set on the first child .el , which only lasted about 1.9ms. So the more children a parent element has using this variable, the more expensive setting a CSS variable on this element gets.

is it valid to declare css variable in class?

Yes, these are called custom properties

Custom properties allow a value to be stored in one place, then referenced in multiple other places.

Note how --bs-gutter-x is reused in lines 7 and 8. The advantage is that you now only need to change the value in one place (line 2).

Media queries in less with variables-need global variables

You can sort of achieve this by using list arrays for each property and screen-width (like the below sample):

@BWInputHeight: '20px','40px','60px'; // Height of the button for min-width=320 and min-width=768 respectively
@minwidths: '320px','768px','1024px'; // The widths for which you need the media queries to be created

.loop-column(@index) when (@index > 0) { // Loop to iterate through each value in @minwidths and form the corresponding output
    .loop-column(@index - 1);
    @width:  extract(@minwidths, @index); // extracts width based on array index
    @media (min-width: e(@width)){
          .dataTables_filter input{
            height: e(extract(@BWInputHeight,@index)); // extracts button height for the corresponding screen width
            max-width: 135px;
            display: inline-block;
            padding: 1px 6px;
            margin-right: 15px;          
          }
    }
}

.loop-column(length(@minwidths)); // calling the function

Demo in Code-pen - Modify output area width to see difference and click the eye icon in CSS tab to see compiled CSS.

Note: As per this Stack Overflow thread, both dotless and less.js should be 99% compatible and hence I have given this answer. In case this doesn't work for you, I will happily have this answer removed.

Purpose of passing global vars to self-invoking function or IIFE

1. Makes it explicit that you are using (and probably modifying) globals in the function.
2. Allows you to modify the behavior in the future. Maybe you have a mockWindow for a unit test. Maybe you are using Node.js and you don't have a window, but want to add to the globals var instead.

p.s. IMO the trivial performance gain mentioned by @Rayon is a red herring.

---

Related Topics