{"id":8128,"date":"2026-01-01T11:20:06","date_gmt":"2026-01-01T16:20:06","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8128"},"modified":"2026-01-01T11:22:11","modified_gmt":"2026-01-01T16:22:11","slug":"important-and-css-custom-properties","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/important-and-css-custom-properties\/","title":{"rendered":"!important and CSS Custom Properties"},"content":{"rendered":"\n

This just bit me the other day so I’m going to write it down. Again, as it’s surprised me before<\/a>. I just think I can maybe explain it even more clearly this time.<\/p>\n\n\n\n

CSS custom properties are super permissive in what values are valid. Like this is totally fine, and I sure it can get much weirder:<\/p>\n\n\n

--whats-up<\/span>: (\ud83d\udc4d\ud83c\udffb\u1d17 _\u1d17)\ud83d\udc4d\ud83c\udffb;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
So my brain extends that to think that this also<\/em> is a complete valid value:<\/p>\n\n\n
--color<\/span>: orange<\/span> !important<\/span>;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Like the value of --color<\/code> is orange !important<\/code>;<\/p>\n\n\n\n
But it’s not! The value is just orange<\/code> and the declaration itself is “important”. Hopefully this graphic makes it even more clear:<\/p>\n\n\n
\n
\"A<\/figure>\n<\/div>\n\n\n
This can come up when there are multiple declarations that apply to the same element. Normally specificity and source order help sort out which declaration wins, but just as !important<\/code> always does, an !important<\/code> declaration trumps those other things. <\/p>\n\n\n\n
So say you have a:<\/p>\n\n\n
<div<\/span> class<\/span>=\"greeting\"<\/span>><\/span>Hello<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Then two selector blocks:<\/p>\n\n\n
div<\/span> {\n  --color<\/span>: red !important<\/span>;\n}\n\n.greeting<\/span> {\n  --color<\/span>: blue;\n  color<\/span>: var<\/span>(--color);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The `!important` part doesn’t become part of the value, the whole declaration is treated as !important;<\/p>\n","protected":false},"author":1,"featured_media":8137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[432,7,180],"class_list":["post-8128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-important","tag-css","tag-custom-properties"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-01-at-7.22.24-AM.png?fit=1540%2C1026&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=8128"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8128\/revisions"}],"predecessor-version":[{"id":8141,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8128\/revisions\/8141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/8137"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=8128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=8128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=8128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Even though --color<\/code> is set to blue<\/code> right there next to where it is used with a higher-specificity selector, the greeting will actually be red<\/code><\/a>. If !important<\/code> became part of the value, blue<\/code> would have won because the custom property declaration is more specific and would have won. But it’s the custom property declaration itself that is important-ized and thus the red<\/code> value wins.<\/p>\n","protected":false},"excerpt":{"rendered":"