Spot the bug - #10

Can you find the CSS bug?

:root {
  --brand: #4f46e5;
}
.button {
  color: var(--brnad);
}

Reply with what is broken and how you would fix it.

Ellen

That’s a classic typo bug: you defined --brand but you’re reading --brnad, so the var resolves to nothing and color falls back to whatever it was before. The fix is just the spelling, or give it a fallback so it fails a little more gracefully:

:root { --brand: #4f46e5; }
.button { color: var(--brand, #4f46e5); }

Yep, and the “fails gracefully” part matters more than people think — without the fallback you can end up with invisible text depending on whatever color is inherited. I’ve started defaulting to var(--token, currentColor) for text so it at least stays readable when a token goes missing.