When you write complex CSS rules, you often have to handle style conflicts. The concepts of cascade and specificity significantly affect the final CSS, so sometimes it becomes difficult to understand and maintain it. CSS nesting seems like a better alternative to create visually сlear code, and along with @scope it offers completely new possibilities for grouping and isolating CSS rules. Such power is often taken too literally, which leads to some misconceptions about @scope. Let's dispel common myths and take a pragmatic look at the @scope real power.
Myth #1: @scope fully isolates styles
No, it doesn't. CSS property inheritance is not prevented. Properties such as font-size, font-weight, color can use the computed value of the parent element - in other words they can cross the @scope limit. If this is critical, you can explicitly use the initial value.
Myth #2: @scope has the highest-priority
Actually, importance, layers, and specificity have higher priority. Therefore, reducing the specificity of the rules using scope may rather weaken your CSS styles in relation to others. This should always be kept in mind.
Myth #3: @scope is better to use with type selectors
You'll probably agree with me that CSS classes can be too long and verbose (especially when you are using BEM). And I've already read a lot of articles about how the @scope syntax allows you to avoid this through type selectors. But there is one nuance - this way is how your CSS force HTML to use specific elements and semantics. Take a look at the following code example:
@scope (.feature) {
img {
border: 5px solid black;
background-color: goldenrod;
}
}
<div class="feature">
<img />
</div>
Everything works fine as long as you only use <img/>. But, for example, you decide to use a ready-made third-party <Avatar/> component:
<div class="feature">
<Avatar />
</div>
and <Avatar/> has structure:
<div class="outer">
<img class="inner"/>
</div>
Then your CSS will try to interfere with the internal styles of <Avatar/>. This is usually not what we want to do. Components encapsulate their behavior and styles. They only expect parameters from you, not intervention. Therefore, any type selectors actually only limit styles, not make them better. And @scope may well do without them.
@scope real power
In my opinion, the most promising feature of the @scope is the ability combine it with @property at-rules. Just look at the next code block:
@scope (.list) {
@property --list-bg {
inherits: false;
syntax: "<color>";
initial-value: aquamarine;
}
@property --list-rounded {
inherits: false;
syntax: "<integer>";
initial-value: 0;
}
:scope {
--list-item-offset: 1rem;
background-color: var(--list-bg);
border-radius: calc(1rem * var(--list-rounded));
width: 100%;
&.rounded {
--list-rounded: 1;
}
&.primary {
--list-bg: grey;
}
&.secondary {
--list-bg: purple;
}
&.offset-s {
--list-item-offset: 0.5rem;
}
&.offset-l {
--list-item-offset: 2rem;
}
}
/* nested scope */
@scope (.item) {
@property --item-bg {
inherits: false;
syntax: "<color>";
initial-value: white;
}
@property --item-rounded {
inherits: false;
syntax: "<integer>";
initial-value: 0;
}
:scope {
margin: 0 var(--list-item-offset) var(--list-item-offset);
background-color: var(--item-bg);
border-radius: calc(1rem * var(--item-rounded));
width: calc(100% - 2 * var(--list-item-offset));
&.rounded {
--item-rounded: 1;
}
&.primary {
--item-bg: coral;
}
&.secondary {
--item-bg: bisque;
}
}
}
}
This is somewhat similar to BEM, but it does not limit the nesting. It's also similar to Atomic CSS, but the utilities here only affect CSS custom properties. The provided CSS can be described using the TypeScript type:
type TStyles = {
/**
* List scope
*/
list: {
/**
* List background
*/
bg?: 'primary' | 'secondary';
/**
* Is list rounded
*/
rounded?: '';
/**
* List offset
*/
offset?: 's' | 'l';
/**
* List item scope
*/
item?: {
/**
* Item background
*/
bg?: 'primary' | 'secondary';
/**
* Is item rounded
*/
rounded?: '';
};
};
}
Do you see what I'm getting at?
Scoped CSS styles can describe abstract UI components without HTML binding. And it looks promising.
Final thoughts
In the previous article, I described multilevel CSS theming using @property at-rule. And in the final example, we saw how @scope allows you to group styles into components. This is exactly what is required at the lower level of theming - specific component styles, grouped, isolated, framework and preprocessor agnostic. Of course, there are still questions about the uniqueness of selectors, their minification, etc., but more on that another time. This time, I just hope inspired you to make your CSS great again.
Enjoy your frontend development!