Can the use of many variables in the CSS affect page performance?

Asked

Viewed 63 times

4

The use of many variables in CSS can end up greatly degrading the page’s performance?

It is possible to say more or less the use of how many would be necessary to begin to bring a negative impact?

An example of variable:

html {
  --example: white;
}

p {
  color: var(--example);
}
css css3 variables
  • 1

    What exactly do you mean when you say variáveis?

  • @Magichat Thank you, updated my reply.

  • 1

    Dude I’ve read a few things about CSS variables, and I’ve never seen anything related to performance, but what you might take into consideration, if you’re doing a framework for example, is that color: var(--example); has a few more characters than color: red; and this can increase the KBs of your .CSS. Of course it is an example for extreme cases with a . CSS with more than 10mil lines etc... Maybe with a Postcss or Webpacker you can configure the output of these variables

1 answer

1

I’ll split the answer into two parts, come on

First:

Yes can and a lot. Performance can vary between various factors,

  • Relate the item;

  • Number of children a variable meets;

  • If it is used in a div that contains 10000 other div;

  • If she only has one son;

Including JS in this equation will generate even more delay in render time.

inserir a descrição da imagem aqui

Second:

The quantity does not matter so much, but rather where it will be used and how much element it affects, a good practice would be to define variables for key points such as text changing size and fonts.

If your goal is even performance you can use simple and "lightweight" CSS processors like STYLUS.

References:

https://blog.jiayihu.net/css-custom-properties-performance-in-2018/

https://blog.teamtreehouse.com/getting-started-stylus

  • Pre-processed CSS face doesn’t solve anything, since its output will remain one . Giant CSS only worsened, as it will exchange what was a variable, for a fixed value, making things even more difficult...

  • The question referred to the performance of variables in css, the "compiled css" file will perform better by not using them.

  • Of course, the compiled file won’t be readable but it’s not quite his focus.

  • I was even repeating the tests of the link here, I found very inconclusive, maybe I need a more suitable environment to test, but compared to his tests of 2018, in Chrome / iOS, with a file of 25 thousand lines, I found it difficult to affirm something, up to pq only with this password, running locally, the variation was in the 400ms of different, something almost imperceptible visually to the user

  • My purpose is really to know if using them too much in CSS can degrade performance too much, or if I could use carefree because it wouldn’t have much impact. So let me get this straight, how much I use them doesn’t matter? What can impact is using them on children, for example?

  • 1

    Yes, the quantity itself does not have so much inpacto, what it generates is where it is used

Show 1 more comment

Browser other questions tagged css css3 variables

You are not signed in. Login or sign up in order to post.