Custom Properties: Questioning :root
Post from September 21, 2020, filed under Web Development.
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 major 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—and targeting those 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, as well as putting classes on everything.
Both are rather ironic, and they make :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 really 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 more specific.
Many thanks to Hannes Schluchtmann for reviewing this post.
Figure: Questioning merit. (Copyright King Features Syndicate, Inc., distr. Bulls.)
About Me
I’m Jens Oliver Meiert, and I’m a web developer and author. I love trying things (sometimes involving philosophy, art, or adventure). Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment or a message.
Read More
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.