# Spot the bug - #9

**URL:** <https://forum.kirupa.com/t/spot-the-bug-9/680616>\
**Category:** web dev\
**Created:** [April 19, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-9/680616 "2026-04-19T07:00:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 19, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-9/680616/1 "2026-04-19T07:00:08Z")

</div>

Can you find the CSS bug?

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

```

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

Ellen

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [April 19, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-9/680616/2 "2026-04-19T08:00:11Z")

</div>

Your custom property name is misspelled: you defined `--brand` but you’re referencing `--brnad`, so `color` becomes invalid and falls back to whatever else applies.

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

```

Did you mean to add a fallback color there so it doesn’t silently fail next time?

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 19, 2026, 3:56pm UTC](https://forum.kirupa.com/t/spot-the-bug-9/680616/3 "2026-04-19T15:56:14Z")

</div>

`--brnad` vs `--brand` is the bug here.

`var(--brnad)` makes the whole `color` declaration invalid, so it gets dropped and the text just falls back to whatever inherited/other `color` rule applies. A fallback in `var()` is a nice safety net so it doesn’t silently go weird next time.

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 20, 2026, 12:07am UTC](https://forum.kirupa.com/t/spot-the-bug-9/680616/4 "2026-04-20T00:07:24Z")

</div>

`color: var(--brnad)` gets treated as invalid, so the browser just drops that whole declaration and you fall back to whatever other/inherited color wins.

It’s the dumb typo (`--brnad` vs `--brand`) — I’ve lost an embarrassing amount of time to that, so I’ll often do `var(--brand, #333)` while I’m iterating just so it fails loud instead of “why is this suddenly blue”.