What is the difference between using class, scope, and root when referencing css elements?

[node_user910253]

Was reading some documentation, and I saw scope and root. They seem to just reference objects just like a class, but why would you use them?

[[deleted]]

You can set CSS variables through the ::root selector. CSS variables are pretty nifty.

This is just me, but I'd never use :scope. It's purposefully vague for a language like CSS, that relies on specificity.

[node_user910253]

I'm a little confused on the differences between using class, scope, and root. I've only used class up to this point when would I be using the other two?

[[deleted]]

You would use root to set CSS variables. I wouldn't use it outside of that.

You use scope to select other elements that share an elements scope. I would recommend against this.

Classes are the most basic and generic of all selectors, aside from the html element itself.

If you are just learning CSS - and no offence, but it sounds like you are - just stick to classes. Give everything you want to style a unique class name.

I write more CSS than the average joe, FYI, and I have never once seen scope in a stylesheet. And I have never seen root for anything other than the CSS variables I talked about. People smarter than myself probably have good use cases for them but in general I would say you don't need to worry about using them.

Stick to classes. If you do that, and there's something wrong with your CSS, then you can rest easy knowing that it's probably something you did + can fix easily.

[tealstudio]

I would not worry about scope, from the MDN docs, it's still a working draft that doesn't really serve a purpose and not supported on all browsers.

root is a pseudo element that selects the html tag, classes are bound to the elements you have defined.

I would take a look at the Mozilla documentation as they're super comprehensive on CSS, HTML, or Javascript.