Naming things just got easier thanks to @scope

🎓 Check out CSS Demystified: cssdemystified.com/?...
@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
✅ Bramus’ great article on scope:
✅ Browser support table: caniuse.com/css-cascade-scope
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@ZeynalZeynalli-yo2nl]

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

[@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.

[@AntonBregolas]

It means friends with increased specificity! As in .friends.friends🤪

[@radadadadee]

lol there's always someone new on each video that figures it out

[@BenjaminAster]

It's in Firefox Nightly already

[@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?) 🤩

[@KevinPowell]

I do have it on my content calendar, but it's a several weeks away :)

[@clevermissfox]

@@KevinPowell 🤩🤩🤩 still great news and something to look forward to!

[@DennisFerreira]

+1 I would watch that!

[@bramus]

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

[@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!

[@DennisFerreira]

This is rad, thanks Kevin. You literally change the way I work.

[@scott-richardson]

on the nav bar example with the button, you COULD also use a :not(.button) on the styling of the main nav elements.

[@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!

[@xilliman]

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

[@mahadevovnl]

Really cool content again Kevin :) Thanks for taking the time to make this video! Once Firefox catches up, I'll early-adopt @scope this summer. Progressive-enhancement, of course. Scope should be additive and optional, and that's good enough :)

[@NicholasZein]

Murphy's law. If it can get messy, it will get messy. Inline @scope inside opens a lot of possibilities. However, do expect people to use it incorrectly.

[@Nerwesta]

I was heavily using custom properties ( CSS variables ) to solve your problem i.e different card colours with different text accent cramped on a minimal amount of CSS classes. But it made the whole thing too much tightly coupled together and a chore to debug, I might give Scope a try soon ! 👍

[@DavidFitzgibbon]

Wow. There's so much in there! Feels like you're showing us the whole elephant. Gonna have to start eating piece by piece.

[@johansmith2840]

helpful with template tag styling

[@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 !!

[@KevinPowell]

Oh, that's an interesting idea for the custom props!

[@jugibur2117]

Thanks for your introduction! Writing the styles inside HTML within the scope ist great in some situations, i.e. overriding quick & dirty or while building components. But in general, I would always try to separate structure and styling in different files.

[@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-ts6gy]

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!

[@koda_pig]

Algo bump, thanks KP

[@zshn]

This is good video is you want to understand the concept of @scope. We should use it to define "themes" and not individual selector behavior.

[@jamesmoynihan948]

Would love to see a breakdown of the differences between @scope and @layer. Right now I'm using @layer in a common component library to allow easy overrides on a scope. Where do you think they differ?

[@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.

[@akramilyas6030]

i remembered scss functions or something like that i learned years ago i really forget it i did something like changing the lightness of a color based on that background color using scss function or idk what was that i would that would be great if u detail it like u do and tnx for every think and all the effort

[@d.l.3807]

Great video. Never used scope. Gonna give it a try at some project.

[@bas080]

I was solving this by using css properties. Using .light .dark (dark in light) would require a new rule. ``` .light { --bg: white; --text: black; } .dark, .light .dark { --bg: black; --text: white; } .vibrant { --bg: deeppink; --text: white } ``` I then use these variables to set background color and such. I could also add variables for links if they are colored differently compared to the text.

[@alexpanteli3651]

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

[@nomadshiba]

just started watching but im gonna say this. \@scope is also great for frameworks because before that frameworks had to keep up with new CSS features in order to make scoping work right but now since its a native feature, it will be more straight forward

[@joejoe04]

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.

[@torstenknauf7799]

My first thought was exactly that. When selectors have same specificity @scopes helps. But styles can still get (accidentally) overwritten by other rules with higher selectors. I feel, @scopes only solves the special case, but adds potentially a new barrier through further syntax for junior newbies in a new project :/ But maybe I will have a second thought in the future and see the full power of it - what is more often the case than not with all the new stuff :)

[@MattDunlapCO]

I think @scope, @layer, :is, and :where mostly are helpful when you are building reusable components and your generic framework. They don't prevent people from overriding your styles and that's the whole point. They make it easy to define styles that do not easily win if someone else is trying to get more specific.

[@dogoku]

This would have been useful 3 years ago when I was building a ui library and i wanted to allow users to override the theme for a specific dom element, but i couldn only go 2 levels deep due to specificity issues

[@maddada]

Really loved the scope in html thing, could be very useful in some cases.

[@MyDpop]

now I can final do a inline hover ... kind of 🤔 @scope{:scope:hover{color:green}}inline hover

[@lismarcin]

yeah, it's works 🥳

[@NotKyleChicago]

You could have used :is(: hover, : focus-visible) for your nav a instead of using a:hover, a:focus-visible, right?

[@peterszarvas94]

inline scoped style is maybe the perfect middle ground

[@johanalm8105]

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.

[@mvonballmo]

You mentioned that the scoped style would be useful "in a componentized world" but that a JS framework would already have a solution for that. I think the scoped style with a style block in a component could _replace_ the JS styling in a component, letting you more easily build web components that include their own styles that apply only to the component.

[@richbarnett4651]

The link to Bramus’ article seems to be missing, can you update please. Great video BTW.

[@DeepTitanic]

I’m trying @scoping the css inside a style tag for each component.. this means @scope { :scope .. can target the parent element removing the need for a unique class name

[@torcid0]

Hey Kevin. One question that you might be able to help me out with. I've started using the content-grid approach you talked about in another video, for some of my pages. One thing I've come across, is my designer often wants stuff like box shadows to overflow outside the content-grid.. So if I make a box shadow on an element, the box shadow is getting cut off, by the content-grid wrapper (That I'm using to control my sections width). What I'm doing to get around it at the moment, is using the breakout class on those elements. Then some padding + negative margin, to give room for the box shadow, but aligning back into place with the other content. It just doesn't seem optimal. Is there a way to make box shadows overflow, without doing overflow on the entire content-grid?... Hopefully it makes sense.

[@w01dnick]

Scope seems nice but first example I'd refactored to using pallete anyway.

[@EricFressange]

For the first part of the video, an other solution is to declare custom properties and re-declare it for each scope style and it will be properly scoped.

[@ShaunLevett]

I wonder how this works with cascade layers. What if I have a button which is in a ‘utilities’ layer, and I have it in a nav and need it to be slightly tweaked when in the nav. I wonder which will win? The cascade layer I assume. While on the subject of cascade layers I have run in to a similar issue on a site I’m building. I have my buttons in a ‘utilities’ layer (the last layer in my CSS). There’s a button in my nav which has a slightly altered style, but is only ever used in the nav. My nav is in a ‘blocks’ layer. Because of this I can’t tweak the button just for the nav, as the button’s layer always wins. So I had to actually move my buttons to the ‘blocks’ layer before my nav to allow the cascade again. Just an interesting issue caused by cascade layers. I know that’s literally the point of them, but sometimes you need to just tweak something from a utility layer based on the block it’s in, and you can’t. I suppose in the buttons utility itself I’d need to add a @scope(.nav) and whack the tweaks in there, but then it’s obviously not in a nav block in the CSS where some people might expect to find it.

[@kahnzo]

you could use a high pass filter for your audio - this video is a little boomy

[@cinderwolf32]

Could you put the context (css) in the title? The thumbnail didn't let me know what the video was about

[@octothorpe12]

It still feels like Scope is one of those things added to CSS to be used as a crutch for people who don't understand or write CSS, and just wanna continue to not learn it. That said, there is a very valid argument for meeting the people where they are. If the reality that most professional CSS is written in the context of some 3rd party framework in javascript, you may as well make it more sane for that usecase.

[@Metadas]

Love this, But seems its not available for firefox browsers - another rule we are going to have to wait for I think.

[@disk0__]

24:32 This looks p great for shopify themes-no js and tons of boilerplate generated id scopes for components

[@imconfusednow]

I don't really understand how the scope is different to just nesting the css. Isn't it the same to do .scope-class { div { } ul { } }

[@TheOnceAndFutureDoug]

FWIW Firefox has said @scope is part of their 2024 interoperability initiative so it should (in theory) arrive this year. Which means we can likely start using it next year, depending on how you care about a given version of Safari.

[@dyto2287]

Scoping what's on the same DOM plane feels like just another foot gun.

[@Frostbytedigital]

All solves to a problem that have to be implemented to take effect include their own footguns. Backwards compatibility has a bad habit of creating this problem when languages or syntax changes.

[@dealloc]

This is not a new concept... Web components does it through shadow DOM, and CSS modules have existed for years at this point, and today frameworks like Astro does it, too by default unless opted-out. The real footgun is using global CSS and having to deal with order of selectors, and end up creating overly specific selectors, or duplicate CSS.

[@chentskooner2502]

This could potentially replace the BEM naming convention. What are your thoughts?

[@maxanimator9547]

this language is so convoluted... why isn't that the default when nesting selectors besides you could very well be using directly descendant selectors without much of an issue

[@AmodeusR]

CSS as many other old technologies are like a frankenstein. Because it needs to work for all the old content created before it, all the mistakes and bad decisions made before needs to be kept. All that they try to do today is remedy such problems with solutions that doesn't mess up what's already in use. Such problems are likely because of it.

[@Kevin-qz4eq]

It took them about 20 years to add ways to do layout in a layout language so I don't expect much from them.

[@rvgn]

I'm having trouble imagining a use for the scoped inline style block. In a componetized codebase, adding this to define components would result in the the styles being duplicated all over the DOM (everywhere the component is used). This is going to bloat page size (for server-rendering) and DOM size. Am I missing something? Maybe it would be useful for a blog that uses a bunch of one-offs in its articles?

[@disk0__]

Shopify themes have per-block/component settings (configured by theme user later) that get scoped via targeting element ids-this seems like a terser builtin version

[@user-in3jd6cm2t]

"@scope will change how you write css". I'm like: Oh no, not again, I've just became a frontender...

[@nested9301]

Did you stop using scss?

[@josejimenezhernandez6990]

what is the advantage of using scope instead of child combinator?

[@carolusfrits1816]

Making profit is what every investors want, when you're investing and not making good profit only losses it definitely becomes a waste of time and capital for you. Forex Trading has made a Lot of people wealthy and equally destroyed a lot others

[@chariovaldagijsbert1933]

Many newcomers harbour dreams of getting rich quickly through trading and are suddenly frustrated when the opposite occurs either because of poor trading skill or relying on luck. Luck can also play a part in winning and losing.

[@billysteveroland4881]

Investing with an expert is the best strategy for beginners and busy investors, as most failures and losses in investment usually happen when you invest without proper guidance. I'm speaking from experience..

[@eugeneraymond252]

I rather invest my money on crypto. Bitcoin trading is great unlike the stock market and other financial markets, bitcoin has no centralized location , since it operates 24hrs in different parts of the world...

[@filippusbartel6447]

The fact that i got to learn and earn from his program is everything to me think about it, it's a win win for both ways...

[@gervaascaspar2426]

This is exactly what Big time investors are talking about, not just you. key thing here is to always trades with a good strategy even if the price goes up or down....

[@abcabc371]

in the 'scope' sintax isnt 'except' a better word to use instead 'to' ?

[@aram5642]

Should we start dismissing questions like "have you used BEM before?" during tech interviews? Seems like @scope if the modern way to target elements.

[@sharakpl]

Been waiting for this episode 😉 Though now I feel it doesn't make a fix for my issue I mentioned in one of previous episodes any better. For now I'm using: .my-nav a:not(.btn):not(.dropdown-item) to force specific components to stay the same wherever they appear in .my-nav. Wouldn't it be better if @scope actually did come before specificity? And if I did want to override it I would do it inside the scope declaration. Like: @scope (.btn) { color: #fff; background: #f00; // If I want to override .btn styles in my navigation .my-nav & { color: #000; background: #eee; } } At least this way my .btn (specifically ) would be still properly styled if used in .footer where .footer a { color: #f00; } I feel like for now scope only complicates things and you still have to list all the components you DON'T want the styles to be applied to. Only instead of: .my-nav a:not(c1):not(c2) you use: @scope (.my-nav) to (c1, c2) { a {...} }

[@ajiteshmishra0005]

Could you please create one video explaining full Tailwind CSS and also comparison of CSS with Tailwind CSS???

[@alexpanteli3651]

Kevin mentioned many times he is not using Tailwind. In fact many CSS gurus don't use it either. Never saw Adam Wathan - founder of Tailwind getting invited to any of the CSS events which is strange considering Tailwinds impact on the way most people style their apps today

[@ajiteshmishra0005]

@@alexpanteli3651 I need to learn, requirement is there that's why. Ok

[@alexpanteli3651]

@@ajiteshmishra0005 what?

[@ajiteshmishra0005]

@@alexpanteli3651 Tailwind CSS

[@fot3k]

Seems like a more complex way of using: :has() :not() :is() etc.

[@ofmouseandman1316]

Naming things just got easier ... Yay there is only on problem remaining in the webdev world: cache invalidation and off-by-1 errors.

[@driezie]

how was css day?

[@SiteStudio]

I can see embedded scoping getting abused in the future.

[@AmodeusR]

Sometimes I feel bad that TailwindCSS took over the CSS world, we have less opportunities to write CSS. We end up not getting opportunity to use such features.

[@dealloc]

That's... not true at all. Tailwind does not replace CSS-it doesn't replace CSS in the browser. You can still use these features however you like. Tailwind is just a set of utility-first primitives with additional features to allow for theming.

[@AmodeusR]

@@dealloc It doesn't replace CSS in the browser, but it does replace the use of CSS by developers. And what determines if we use something or not is the job market. If most jobs require TailwindCSS instead of CSS/SCSS, what's the point of using it if you already know it?

[@coolemur976]

Tailwind is what CSS should be. You don't have naming problem in TailwindCSS. Ugly classes ? Use prettier and class hiding plugins and scope css in components. One of the reasons Tailwind is superior to CSS: using CSS you create many many custom classes and in large projects your CSS bundle just exploding (doesn't scale). Also I notice many people try to reinvent the wheel in CSS - to create their own utility classes (which Tailwind is doing out of the box). I just feel bad that TailwindCSS is not the standard!

[@dealloc]

@@AmodeusR > Tailwind is just a set of utility-first primitives with additional features to allow for theming.

[@desirerichards-campbell3707]

Things I learned from this video: 1. @scope can specify child scope exceptions (to etc) 2. un-named scopes in style tags (super interesting!) 3. "footgun" -edit- unnamed scoped styles inside an element (via ) sounds like a great solution for injecting styling for specific parts of a page without those styles taking over the rest of the page. This is something I've needed to do on pages that need unique styles for multiple elements (eg this page has 30 tables that need to be a different colour from the usual tables on other pages). Currently I declare these rules in a style element inside the main and have to add a main.is-post selector before all the rules to make sure these styles don't bleed out to the rest of the page (eg the site header styles) so scoping the whole thing would allow me to remove main.is-post from all the selectors, which would be great!

[@osterello]

Isn't it like using nesting in SCSS? @scope (.parent) { .child { color: blue; } } .parent { .child { color: blue; } }

[@marwaneslam9904]

#NorthernGaza_is_dying_of_hunger

[@marwaneslam9904]

#NorthernGaza_is_dying_of_hunger #NorthernGaza_is_dying_of_hunger #NorthernGaza_is_dying_of_hunger #NorthernGaza_is_dying_of_hunger #NorthernGaza_is_dying_of_hunger

[@cakecaake507]

or use tailwind

[@kylesandstrom853]

Who would have thought Firefox would get under my skin on a daily basis...?

[@Dylan_thebrand_slayer_Mulveiny]

On the surface, this looks like a good idea. It's really not. Breaking specificity rules means people are going to use !important to override styling because they can't understand why just overriding it with natural css hiearchy isn't working. This is a tool we don't need, and it'll actually cause more issues than it solves. And most of the issues it solves are just from novices/lazy devs who don't fully understand how css works. The proper approach for overrides like this would be to use css variables that you can modify using standard css selector structure. They provde the same thing as scope without breaking hiearchal rules.

[@holypowerenjoyer6059]

People will do anything to not use React/Tailwind

[@MrHerbalite]

Most progress happens that way. For JS we had jQuery, then JS was enhanced, so jQuery wasn't needed anymore. Tailwind and React set new Standards, and the Standard makes likexsome of the things. As developers we profit now that things we do run faster.

[@marwaneslam9904]

#شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع #شمال_غزه_يعاني_من_الجوع

[@studiosoftmorecambe6879]

How is @scope( .light){ :scope making the code simpler and more readable - you are solving a problem that doesn't exist in the real world.