Jens Oliver Meiert

Custom Properties: Questioning :root

Post from September 21, 2020 (↻ May 27, 2021), filed under .

For custom properties (aka CSS variables) we got into the habit of declaring variables in a rule with a :root selector.

This habit we probably inherited from the spec, and it had then likely been picked up and promoted by the larger web development communities.

Here’s a basic example of :root in action:

:root {
  --test: green;
}

body {
  background: var(--test);
}

What’s interesting about this use of :root is how rarely CSS is otherwise used to style non-HTML documents—whose targeting is :root’s main selling point. Ask yourself, when have you last styled anything not HTML or SVG? (I did until 2009, for RSS feeds.)

What’s also interesting is how much emphasis is usually put on avoiding the universal selector, yet adding classes to everything.

All of this is rather ironic, and makes :root for custom properties look like a somewhat “hipster” response, when one had just found out that CSS can be used for languages other than HTML. No offense there—it just looks a little like someone had just found out. At this point many may be following a convention.

Use of :root for custom properties goes beyond irony, however, when it’s used exclusively for HTML. There the enthusiasm seems out of place:

The root element for HTML is <html>. That is well-known. If a web developer knows what they’re styling—if you know what you’re styling—, be specific. That means, use html as your selector, not :root. It works:

html {
  --test: green;
}

body {
  background: var(--test);
}

Therefore, unless you’re working in an environment in which style sheets serve several document types (and roots) at the same time, question the use of :root, for custom properties. It could be argued to be an anti-pattern for HTML. Be specific.

Many thanks to Hannes Schluchtmann for reviewing this post.

Soon there are but three victors left, Sir Launcelot, Gawain, and Val. It seems certain the might Launcelot will once again receive the prize. Then…

Figure: Questioning merit. (Copyright King Features Syndicate, Inc., distr. Bulls.)

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Google Play Books and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2020 → Custom Properties: Questioning :root

Last update: May 27, 2021

Professional frontend developers produce valid HTML and CSS.