Scoped CSS lands in Chrome 118
Scoped CSS lands in Chrome 118. This is a new feature that allows you to scope the CSS to a particular element or part of the page. This is a great feature for component-based web development where you can scope the CSS to a particular component and it won’t affect the rest of the page.
You can loosely compare this feature with encapsulation in other languages like JavaScript where you can scope the variables to a particular function or class and it won’t affect the rest of the program.
Scoping the CSS
To use scoped CSS, you need to use the @scope rule in your CSS. For instance, if you want to scope/restrict the CSS within a particular element, you can do it using class or ID selectors like so.
@scope (.class-component, #id-component) {
/* CSS rules */
}
In the above example, all the CSS rules written inside the @scope rule will be scoped to the .class-component and #id-component elements.
So, for instance, if you have an HTML markup like so.
<div class="all-green">
<p>This is green</p>
<div class="all-pink">
<p>This is pink</p>
</div>
</div>
And if you want the fonts inside the .all-green element to be green and the fonts inside the .all-pink element to be pink, you can do it like so.
.all-green p {
color: darkgreen;
}
@scope(.all-pink) {
p {
color: #c94f65;
}
}
This will make the fonts inside the .all-green element green and the fonts inside the .all-pink element pink.
Here’s it in action.
See the Pen The @scope demo by Amit Merchant (@amit_merchant) on CodePen.
“Holes” in the Scope
Now, if you want to exclude a particular element from the scope, you can do it using the following syntax.
@scope (.scoped-component) to (.skip-me, .me-as-well) {
/* CSS rules */
}
Here, the CSS rules will be applied to all the elements inside the .scoped-component element except the .skip-me and .me-as-well elements.
So, if we modify the HTML markup from the previous example like so.
<div class="all-green">
<p>This is green</p>
<div class="all-pink">
<p>This is pink</p>
<p class="not-pink">
This is not pink
</p>
</div>
</div>
And if we want the fonts inside the .all-green element to be green and the fonts inside the .all-pink element to be pink except the .not-pink element, we can do it like so.
p {
color: darkgreen;
}
@scope(.all-pink) to (.not-pink) {
p {
color: #c94f65;
}
}
Here’s it in action.
See the Pen The @scope demo with holes by Amit Merchant (@amit_merchant) on CodePen.
Advantages of Scoped CSS
Scoped CSS has a lot of advantages. For instance, it can help you avoid the specificity wars where you have to use more specific selectors to override the styles of the previous selectors.
So, you’d be saved from writing something like this.
.my-component p {
color: #c94f65;
}
.my-component .not-pink {
color: darkgreen;
}
I think this makes the CSS more readable, maintainable, and less prone to errors.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
