DEV Community

Understanding the Concept of Scoping in CSS

Bilkeesu Babangida on September 29, 2024

Introduction One of the key problems developers face with CSS is styles leaking out to components they should not apply to. Developers h...

Read full post

𒎏Wii 🏳️‍⚧️ • Sep 30

Really nice article, and also very complete, although some of the details like the & working like the scope root selector while :root only selects the root specifically might be hard to understand when you don't already know them.

One thing I'd add: it'll also be possible to scope styles in an @import statement and even in <link> tags, although the details of this are still being discussed.

github.com/w3c/csswg-drafts/issues...

𒎏Wii 🏳️‍⚧️ • Sep 30

I just remembered that I wrote my own article on scope a few years ago; it's not nearly as detailed as this one, but it mentions a few additional details about where this could be useful to add some more context:

dev.to/darkwiiplayer/what-is-css-s...

Best Codes • Sep 29

Very interesting! You can achieve the same thing much more succinctly, like this:

.box {
  display: flex
}

.box .p {
  color: red;
}

In that example, only <p> elements in an element with class box would be red, the rest would be the default color.

𒎏Wii 🏳️‍⚧️ • Sep 30

This only works for the simplest cases. It doesn't consider scope proximity and, more importantly, doesn't let you define a lower boundary for the scope.