The post asks what happens to unused CSS variables when using Craft. A community member responds that unused CSS variables have a minimal performance impact, as they are only resolved at runtime when needed. However, deeply nested variables can add a small amount of overhead. The community member suggests keeping variables simple and direct to ease debugging and maintenance.
Another community member thanks the first for the insightful explanation and says they will remove colors/variables outside their design system, as suggested.
@Ryuuu, I was curious about this too, so I did some research. It turns out that unused CSS variables have a very minimal performance impact since they are only resolved at runtime when needed. However, the performance hit is negligible even when variables are used extensively. That said, deep nesting of variables can add a tiny bit of overhead because the browser has to resolve each reference. For example: :root { --black: #000; --primary-color: var(--black); --font-color: var(--primary-color); --font-link: var(--font-color); }
(keeping vars simple and direct keep debugging and maintenance easier too).
