CSS Custom Properties Handle !important Differently Than You'd Expect
Even seasoned developers can be caught off guard by how !important behaves inside CSS custom property values. As Stefan Judis recently highlighted, the !important flag isn't actually part of the final computed value—it gets stripped out entirely during resolution.
Consider this scenario:
div {
--color: red !important;
color: var(--color);
color: yellow;
}Intuitively, red should win because of the !important flag. But since that flag is removed from the custom property's value, the cascade resolves yellow as the winner—not because of declaration order, but because the color property itself doesn't see the flag. If color: red !important; appeared first, though, red would take precedence.
The twist is that !important isn't simply discarded. It plays a role in the cascade *before* being removed—affecting which custom property value gets selected, but not the final value that gets applied. Judis demonstrates this with:
div {
/*
`!important` overrules the
other `--color` definitions
*/
--color: red !important;
color: var(--color);
}
.class {
--color: blue;
}
#id {
--color: yellow;
}At first glance, you'd expect yellow to win here, given its higher specificity via #id. But the scoped nature of !important means red wins the custom property resolution, and that resolved value is what ultimately gets applied to color.
