Spot the bug - #16

programming web dev
1

Can you find the CSS bug?

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

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

Hari

2

--brand is spelled wrong in the var() call — you wrote --brnad, so the color value never gets picked up.

.button { color: var(--brand); }
3

Since var() can take a fallback, you can do color: var(--brand, #333); so the button text doesn’t disappear while you’re hunting the variable name.

4

Lol the “var(–brand, #333)” tip is nice, but if you typo the custom prop doesn’t it just quietly fall back and you end up shipping a bunch of “why is this #333” buttons? ngl I might be wrong here.