{"id":6836,"date":"2025-08-21T15:50:41","date_gmt":"2025-08-21T20:50:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6836"},"modified":"2025-08-21T15:50:42","modified_gmt":"2025-08-21T20:50:42","slug":"you-really-dont-have-to-put-your-css-custom-properties-in-root","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/you-really-dont-have-to-put-your-css-custom-properties-in-root\/","title":{"rendered":"You really don&#8217;t have to put your CSS custom properties in :root {}"},"content":{"rendered":"\n<p>I feel like <em>most<\/em> usage of global CSS custom property use has the author putting them into a <code>:root<\/code> selector like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-pseudo\">:root<\/span> {\n  <span class=\"hljs-attribute\">--brand-color<\/span>: red;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is just a PSA that you&#8230; don&#8217;t have to. It&#8217;s not required. It has nothing to do with custom properties. It&#8217;s just a selector. It happens to select the <code>html<\/code> element on a website, except for with extra specificity that I&#8217;d wager isn&#8217;t typically useful. I think the earliest code samples of them in the spec did it that way for whatever reason, and it <em>stuck<\/em> as a weird niche cultural artifact. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Well (you shake your dirty martini at me) <em>Chris<\/em> \u2014 I just prefer <code>:root<\/code> because not all CSS usage is within an HTML website. You can put a <code>&lt;style><\/code> tag in <code>&lt;svg><\/code> you know!!!<\/p>\n\n\n\n<p>Yes, and if you do that, <code>:root<\/code> will still select the <code>html<\/code> element, not the &#8220;root&#8221; of the <code>&lt;svg><\/code> element. So that&#8217;s weird. It&#8217;s true that if you do SVG-as-<code>&lt;img><\/code> it will select the root of the SVG, but that difference in behavior is probably reason enough not to do it. <\/p>\n\n\n\n<p>Anyway \u2014 just quit being fancy and use the <code>html<\/code> element. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I feel like most usage of global CSS custom property use has the author putting them into a :root selector like: This is just a PSA that you&#8230; don&#8217;t have to. It&#8217;s not required. It has nothing to do with custom properties. It&#8217;s just a selector. It happens to select the html element on a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6838,"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":[29],"tags":[7,180],"class_list":["post-6836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-custom-properties"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/08\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3Vwd2s2MjE4MjIyMS13aWtpbWVkaWEtaW1hZ2Uta293ZzF0NGQuanBn.webp?fit=1024%2C731&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6836","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=6836"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6836\/revisions"}],"predecessor-version":[{"id":6839,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6836\/revisions\/6839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/6838"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=6836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=6836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=6836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}