Downsides of CSS variables

I was trying to get my team to consider using raw CSS variables (officially called CSS custom properties) rather than SASS variables which can't be accessed with JS.

The reason why we didn't adopt CSS variables boils down to this one point:

CSS variables makes it more difficult to debug

CSS vars can be updated with JS

• might be the killer feature for CSS variables
  • allows theming
  • lets you set styling with CSS vars in JS
• downsides
  • you'll have to check more code (all your CSS and your JS) to debug why the variable is set

CSS vars can be reassign in different scopes

• example: defining a variable in --root and again in a class
• again, this is a powerful feature
• it might be confusing and harder to debug where a variable is set
  • especially when CSS specificity can be confusing enough when learning the basics

Why CSS variables are awesome

• can be updated by JS
• can be cascaded
• part of the CSS spec so it gets updated instantly on the page
  • no compile step!
  • no need to refresh the webpage!

---

Last update: 2023-04-24