Episode 09 game · Kitsu · Fire
Banish the Important Demon
Kai’s button CSS loads last and still loses. Feel the !important siege grow, lower the heavy header selector instead, then prove it in a real browser cascade with zero !important.
color, with its weight
1 · Feel the siege
This page runs on a real browser cascade. Do it Kai’s way, one step at a time, and watch the button and the demon.
2 · Make the header quieter
The button isn’t too weak. The header rule is too heavy. Rewrite it, then decide what happens to Kai’s !importants.
3 · The cascade test
Your stylesheet goes into the real cascade. Every link must get the colour it asks for, with zero !important.
New seal earned
The demon went quiet
Acharya’s Rule #9Keep selectors flat. !important starts a siege, it never ends one.
#site-header .nav a is 1-1-1. .btn-cta is 0-1-0. The first column that differs wins.
Loading last helps only when two selectors score exactly the same.
:where() counts as zero. Layers order whole groups. !important just starts a siege.