Today, I want to start off my first ever blog post talking about something I see seldom mentioned in tutorials, yet has been a real game changer for me ever since I started using it back in early 2020.

The first 5 lines of your style.css file likely starts out (more or less) something like this:

body { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

But here I propose why I think something like this should be the first thing you write in your project's global CSS file:

:root {
  --logo-color-green: #00B0A1;
  --background-white: #FFFFFF;
  --highlight-blue: #039FB1;
  --soft-black: #1B1B1B;
  --about-header: 10rem; 
}

Hex codes are not easy to read by any stretch of the imagination. And even if you're using a VSCode extension like Color Highlight by Sergii Naumov get it here, it can be a real struggle developing the user interface for a simple landing page; keeping all the colors where they need to be and scrambling to find that perfect green hex code from five minutes ago which is no longer saved to your clipboard. 😤

This is where the knight of pseudo-class selectors comes to the rescue. Really quick, you should be aware of why :root is in a league of it's own in terms of the HTML document. You may know that your HTML document is organized like a tree, with the document itself being the root and all of it's elements being the descendants (or branches if you will). The :root pseudo-class is almost exactly the same as the html selector except that it has an even higher specificity. You can read more about specificity here. But for now let's talk about what it can do for you.

Why root is heckin' useful

Gone are the days of copying and pasting hex codes from selector to selector, scrolling through hundreds of lines of CSS until your eyes melt out of your face. :root allows you to now place all of your colors, font-sizes, or whatever CSS values you want to reuse into one main selector and give each one a unique identifier. This is called declaring global CSS variables and it's the big cheese. Please note that you can declare CSS variables in any selector, but what makes :root unique is that it has the highest scope, so you can use variables declared inside root anywhere in your CSS.

Declaring a CSS variable uses syntax like this --your-variable: value; and using your variable in any other selector looks like this:

div {
  background-color: var(--background-white);
}

keep in mind that variable names are case sensitive.

One more awesome thing is that :root has a 100% browser compatibility according to MDN Web Docs, however, CSS variables in general are not supported by Internet Explorer (go figure 😐).

I hope you find this useful and learned something you can try out in future projects to see if you like it!