Do long CSS custom property names have an effect on performance?

Question

I've seen a few projects to shorten CSS variables and I'm considering trying it out to reduce my CSS's size.

What are the effects of long CSS custom property names from a page performance perspective?

1. CSS size-reduction (consider compression)
2. CSS parsing and evaluation

Projects mentioned:

• https://github.com/navanshu/postcss-variable-compress
• https://github.com/godaddy/short-css-vars

Answer 1

Long variable names will not really affect your performance (in terms of CSS parsing and rendering) and will not even affect the data transferred from site to user in case you are using server compression tools like gZip (as under the hood it works almost the same way as your mentioned projects, but "on the fly"). You should better invest your time in better optimizations for other parts of the site