2026-09-02 · 5 min read · Rahul Chitturi
- css
- frontend
- debugging
A CSS custom property can exist in DevTools while the declaration that consumes it becomes invalid at computed-value time. Custom properties store token sequences, so an unexpected unit or missing fallback may not fail until var() is substituted inside calc().
The result is often a property reverting to its initial or inherited value with no obvious syntax error in the source stylesheet.
Trace the final token stream
Inspect the custom property on the affected element, including cascade origin and inheritance. Substitute its value into the consuming declaration on paper before changing specificity or adding important flags.
- Check whether a variable contains a number, length, percentage, or full expression
- Keep required whitespace around addition and subtraction operators
- Verify that arithmetic combines compatible dimensions
- Confirm fallback values include the units the property needs
Define variables at useful types
Store unitless design tokens when each consumer deliberately applies a unit, or store complete lengths when consumers should not reinterpret them. Name variables so the expected dimension is clear.
Test nested fallbacks and container-dependent percentages in the real layout. A valid calculation can still resolve differently because font sizes, viewport units, or containing blocks changed.
A Flashman workflow
Use the CSS formatter to expose nested calculations, units converter for explicit scale checks, color tool when computed colors are involved, and diff to review token or computed-style changes.
Cover missing variables, zero and negative values, mixed units, zoom, mobile viewports, reduced motion, container queries, and browsers in the support matrix.