Naming things just got easier thanks to @scope

@scope is here, and it's pretty awesome! This video is a bit of crash course into it, looking at why it can come in handy, where it fits into the cascade, some of the potential issues you can run into when using it, and more.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:43 - Why you might want scope in the first place
03:40 - Avoiding this issue using @scope
06:50 - Why this solves the problem - scope proximity
09:05 - Specificity still matters
10:28 - CSS Demystified
11:08 - Stop running into specificity issues thanks to scope
13:30 - Stop the scope at a specific element or elements
16:25 - You can have selector lists if you need to target several elements
17:16 - The difference between & and :scope
20:52 - Things will still inherit!
22:24 - Using inline style blocks
24:45 - Browser support

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ZeynalZeynalli-yonl]

doesn't matter if i can build the style of any website, i always learn new things from you, and it always makes me thrilled to use them in my projects

[bramus]

Thanks for the shout-out/link to my article, Kevin. Love that you spent a lot of time on the specificity-aspect.

[modernkennnern]

That inline styling thing is really cool!

The specificity issue can (other than maybe the "to" part) can just as easily be solved with ":where(article) { a { color: red; } }".

[clevermissfox]

Yessss… back with classic KPow content !!!! Awesome! View-Transitions multi page next? (And perhaps updates for single page since they’ve changed a bit since the last KPow VT coverage?) 🤩

[ilyakonrad]

Man, I didn't realize you say "front-end friends" and not "friend and friends" until I read it on the t-shirt 😆
I was like what does that even mean, friend and friends, haha.

[LarryGarfieldCrell]

The style scope embedded within the element made my jaw hit the floor. Sweet leaping jebus! That feels like it would be interesting in combination with web components.

[JeremyStreich]

The style tags in elements thing is very interesting... It seems like it would be useful in a server-side component library. That way you can give someone your card, or ect. But it would make the document much larger than necessary.

One of my coworkers often writes things that are Ajaxed and/or CURLed into other systems by other people and includes his own style tag before his HTML. He has to use long prefixed classes to hopefully not apply styles to things he doesn't own. This would fix that. He could just wrap his thing in a div and scope his styles to that div.

[alexpanteli]

After watching this in-depth video, I realized it's still safer to use CSS modules to prevent styles from leaking especially in the enterprise applications

[TheQxY]

Having the scope work in HTML is awesome! I currently use CSS Scope Inline for this. Locality of behaviour like that is great for server-side rendering!

[TheThirdWorldCitizen]

I found @scope interesting in the dev article you showed, but in practice not much. Your example was very insightful, but still considering :where, :is, :not and :has are well supported, @scope seems a bit niche.
The inline feature definitely seems powerful, I think it would be a fantastic replacement for ::ng-deep, very neat!

[johanalm]

It's great that Firefox exists as an alternative to Chromium and Safari. But it's a bit frustrating to me that they're so much slower at implementing useful features like this.

[kopilkaiser]

Kevin, I'm a big fan of yours now. Thanks to you, I've learnt and improved my css way ahead. Every day, I'm improving thanks to your awesome and informative tutorials

[nardu]

That inline style block has given me an idea.
That's pretty neat
Awesome video

[benjaminmosnier]

I wonder if the inline style block thing (23:25) could be used to define css variables.
Imagine working with a CMS that allows you to redefine props like width, colors, stuff like that at a page level (temporary change color for a button for instance). This could be messy with only used CSS variables because of the inheritance nature of CSS.... but with the new @scope, I can imagine a way to set new rules without going crazy of selector names...
I totaly get the "why people will hate this", I am divided on that matter myself, but I have to admit, to open new cool possibilities !!

[NicholasZein]

Murphy's law. If it can get messy, it will get messy.

Inline @scope inside <style> opens a lot of possibilities. However, do expect people to use it incorrectly.

[erlenbg]

8:18 - I thought MORE HOPS was BETTER, but after seeing this explanation, I checked again and I now see that MORE HOPS is BITTER. 🍻

[Sofia-tsgy]

So cool! Would love to see examples using @layer and @scope at the same time and tips on when to use one or the other, since they both address specificity issues!

[joejoe]

Maybe I don't understand the implications, but I really don't agree with specificity overruling @scope. I personally think any style in @scope should take precedence when applied to the same element as styles outside the scope, regardless of specificity. I feel like the way it's going to be limits its usefulness. But again, maybe I'm just not getting it yet.

[ssygon]

Nice option to have a slightly varied style, but could get messy&complicated if used improperly. Will have to look more into that 'to' condition logic, see if it's very useful.

Also, this is great natively, coz it's similar to how scope styling works in Vue & Svelte components (and can style just by targeting generalised elements(e.g. button), rather than having to think of a different classname(e.g. .btn) for different pages/sections/etc., so the styles are contained within the components, without having to bleed out to other areas of the pages.

[xilliman]

Tab told me at the css day to look up @scope for our data theme problems and now there’s a video 😀
Thanks