DEV Community

Cover image for That One Time a CSS Variable Took Down Production

That One Time a CSS Variable Took Down Production

Abhinav Shinoy on May 30, 2025

Let me tell you a story. This is when I was working at a startup. It starts like most do: on a Friday, with good intentions and a small, seemingly ...
Collapse
 
dotallio profile image
Dotallio •

Invisible buttons and Friday fire drills are such a nightmare - I've been bitten by silent CSS variable fails too.
Did you end up adding any custom linter rules or automated checks after that?

Collapse
 
abhinavshinoy90 profile image
Abhinav Shinoy •

Glad (and sorry?) to hear I’m not alone in the CSS variable pain club. 😅

Yep. We added a stylelint rule to catch CSS variables without fallbacks.
Something like:

"declaration-property-value-disallowed-list": {
  "/.*/": ["var\\(--[a-zA-Z0-9-]+\\)$"]
}
Enter fullscreen mode Exit fullscreen mode

This flags any usage of var(--some-var) without a fallback (i.e., missing the , fallback part).
Simple but super effective — saved us a few times since!

Collapse
 
javascriptwizzard profile image
Pradeep •

Beautifully written!

Collapse
 
abhinavshinoy90 profile image
Abhinav Shinoy •
Collapse
 
michael_liang_0208 profile image
Michael Liang •

Great post!

Collapse
 
abhinavshinoy90 profile image
Abhinav Shinoy •
Collapse
 
jaybear profile image
Jens •

"CSS variable pain club. 😅" ... congrats, you've earned a very new badge today!
Bad-CSS-Badge-2025

Collapse
 
macnick profile image
Nick Haralampopoulos •

The moral of the story is: never deploy on Friday.

Collapse
 
kc900201 profile image
KC •

I wonder if the bug can detected early if specific linters for CSS such as style lint is used for checking.

Collapse
 
abhinavshinoy90 profile image
Abhinav Shinoy •

Yes @kc900201 , Thats what we did afterwards. We added a stylelint rule to catch CSS variables without fallbacks:

"declaration-property-value-disallowed-list": {
  "/.*/": ["var\\(--[a-zA-Z0-9-]+\\)$"]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

been there, man. the number of times i’ve watched a 'harmless' tweak nuke something is too high. respect for sharing the pain - helps me remember to double check for those fallbacks.

Collapse
 
abhinavshinoy90 profile image
Abhinav Shinoy •

Thanks @nathan_tarbert !