CSS Native @scope

Not too much. I'm excited to talk about scope here. We it's Gonna be a fairly quick episode. There's not really a whole lot to it, but it's certainly something that the audit should know about as it's coming down the pipe.

Yes. So scoping your CSS is is nothing new. We've had many ways to scope our our CSS, both from, like, naming conventions all the way over to, like, lots of things like the Svelte SvelteKit has scoping built in.

However, like all good things, they eventually get added to the language. And they're they've been trying to add scoping to the language firm For a long time, there was a Scott attribute on the style tag for a while, and that got scrapped. And it looks like finally, we are going with the at scope rule. So the reason the reason why I think this is kind of interesting is because, like, scoping is something all of us need to do. We've all run into applications where you have lots and lots of global CSS and that CSS applies to absolutely everything on the page. And It's kind of nice in some cases where it cascades all the way down, but you often end up in places where you can't just take components out of your website, and have them sort of live on their own, and have the CSS sort of be coupled with them. And scoping CSS allows us to to do that. You're not going to have styles that leak outside of of where they're supposed to go. CSS scoping, there's no need for complex naming conventions.

So BEM was a very popular one where you would you would name thing as a block element modifier. You'd have these really long class names on it, And it was a great way to sort of keep your CSS modular and, be able to scope it to what it exists. But you don't you don't need any of that stuff with it. You don't need to add a 1000000 classes to everything.

You can simply just write very simple CSS selectors, often element selectors like p Or h two to actually target the the element that you want.

I agree. Especially like you see like, sometimes you open up a storybook, which is like a UI for viewing your components and building your components in isolation.

And it's just like, damn, that's so nice that these This this component looks exactly the same if you put it in a blank HTML page JS if you were to put it in your application.

Because I feel like that's where, like, websites start to rot, where you you take a component from like, I have this on some of my course websites. It's like I'll take a button out of 1 of the sites and put it into another one, and it'll look slightly different. Like, oh, yeah. Shoot. Like, it didn't inherit the style because it's not on this page, and That's how, like, style rot starts to happen. So I'm a big fan of that. So how does it work? Well, we're going to throw some screenshots up on the video podcast as well. If you're on Spotify, you should be able to just switch to the video and back to audio.

If you're driving, please don't do that. But I'll describe it as well. The way that it works is you have an at Scott, so no different than at media.

You open up a scope block with at scope and then you give it a, a selector.

You don't have to give it a selector. I'll talk about that in just a second. But if you want to say, all right, If you have a card, I want to say at scope, you have to have the parentheses, in my experience, Yarn. And what that does is it opens up a scoping block for the elements that match that selector.

Then inside of that scoping block, any CSS you can imagine, With the exception of one thing, I'll talk about that in a second. So any CSS you dump inside of that scope block will only be applied to the element that is Vercel, in that specific scope. And you don't have to. This is a little bit you might be saying, oh, how is that different than nesting? It's a little bit different than nesting in that. You don't you aren't making these crazy long complex selectors. With nesting, you have Scott card space p, And with CSS scope, you simply just have paragraph selector and that will apply to any paragraphs that are inside of my card scope.

And I think that's pretty neat that you just I find the same thing was felt as well. It's like, oh, it's beautiful. You don't have to, like, add classes to everything.

You just select the you you can add classes to stuff. There's nothing wrong with adding classes to things. But if you just want us to you saw a style, all the paragraphs or you want to style the 1 unordered list In that component, you can. Yeah. And

one cool thing I've Ever since I read this, I'm like, damn, I love that.

And it's the idea of not having to specify a selector for your scope.

And the idea is, is that you you have a component.

And when I say a component, you have a element like a div.

And if you put a style tag inside of that div with a scope block into it. The browser will figure out, Oh, they didn't tell me what the name of the scope was, so I'm just going to scope it to whatever the parent of the style tag JS. So you can just very similar to in Svelte, how you have A component and you have a style tag next to it in the same file, you could just say, All right, add scope And you can apply the CSS and it will only be applied to the elements inside of the parent card. And I think that's so cool because you can make these like super portable little pieces of HTML that have the CSS Assigned to it without having to be like, alright, we'll make sure you add this specific class. You don't need any classes. You don't need anything like that. Yeah. This to me is the space that I'm most interested in. I'm working on some stuff right now just using straight HTML

There's no build step. I didn't even say that. That's a thank you, Scott. That is awesome.

sort of while I'm on that thought of Having Scott CSS inside of an element, pseudo inline hover styles? Yes. Yes. One thing Yes. One reason why people absolutely love Tailwind and don't like inline styles is because inline styles like style equals quotes.

They're limited in that There's a whole chunk of CSS that you can't do in an inline style. You can't do hover styles. You can't do media queries. You can't do container queries. Has? You can't.

Yeah, you can't do has you can't do parent child selectors, right? You can't do any of that. And Tailwind makes all of that possible, which is amazing. And I'm not saying this is going to replace tailwind. It's probably not because the tailwinds to text is much nicer. But look at this example where you can you have a button and you want to add a hover hover background to that button. How do you do that in CSS? Well, you you make a class, You put a style tag below it, and you give it an you give it a class. You say, alright, when this class is hovered. So now you can just stick a style tag in the freaking button and say at Scott. And then you can select the button itself with the colon scope selector.

So colon Scott, colon, hover Background red. And it's just like you're and you can do that with media queries, you can do it with container queries, you can do it with any Vercel, and it would just be Scott to that specific element.

Alright.

Now you might be saying, okay, Wes, that's dumb. All of that stuff, I don't have those problems that that solves. Yeah. Here's here's a really cool thing.

Sanity scope. And we talked about this with GitHub Bramas Wes when he had him on the podcast, his CSS donut scope will allow you to specify where the scope starts. Of course, a class can can say, alright, apply these styles to this class and any images within that class. You want to do something. The problem becomes with the sea of cascade of CSS. The C and CSS stands for cascading, meaning that any CSS you apply at the parent will automatically scope all the way down. And Node problem we have in the syntax website is variables. Do this very you set a variable at a very high level. There's no way to stop that variable from going all the way down unless you were to reinitialize it. Right? So if you have a card inside of a card or you have a dark sidebar with a light mode card inside of that.

The problem is that when you redefine a variable at one level, the variables all the way down the DOM tree. You get overwritten with Sanity scope. It's going to allow us to stop the cascade at a specific spot. So you say at Scott card to Scott call out. So basically you're saying this is where it starts, the end of the Sanity, and this is where it ends, the whole of the donut.

And I was trying to make like a Wes I was doing demos for this, I called it Timbit Scott.

Inverted Timbit scope.

I don't know if everyone would get that. As a Canadian podcast Yeah. We need to tell everybody that in what do you call them in the states? Doughnut holes?

Yeah. So donut scope is is pretty nifty, and I could I can see ourselves using this in components, being, like, scope it from This card to Yes. And then like like a child. Right? So you might want to Or or to the next scope. Like, I I could also imagine, like, every single time you have a component, you give it, like, a a class of component. You're like, alright, Go from here until you hit the next component, and then stop, and then that component will have its own scope. Don't don't apply it to any children. The only, like, one weird thing is that if you have a background and you have a nested component, it's it's not gonna, like, punch out the background, so you'd have to reset the background. Mhmm. It would be nice if you had, in addition to the colon scope, if you had, like, a colon end scope.

Never mind. That doesn't track. Ignore one. Wes. Because you you can do it with all the and all of this plays nicely with CSS, Like the ampersands? So the ampersand will give you the the parent selector, and you can use has, and all of the new CSS stuff, In addition, works well with this. So you have really fine grain control over the elements that you are selecting.

Last thing, browser support. It's in Chrome. Just hit Safari technical preview.

So it will we don't know if they're just, like, testing it out or whatnot and Trying to find things. There's Node limitation we did find. Adam Adam Wathan of Tailwind was was actually investigating this because I'm sure he's got lots of scoping issues that Sanity fixed by this.

Keyframes must be global.

So If you want to if you want to generate a specific key frame for a specific element, it has to have like a still has to have a unique name. And then you often to generate a unique name, you have to use JavaScript. So, it would be neat if you could scope keyframes.

But I think the the fix for that is at property in CSS.

An at property in CSS will allow us to specify The type of a CSS variable, and that will then allow us to switch values of a keyframe. So you could say, like, you could have a length one, you could You could set the width or the height of something and simply updating the variable will make the keyframe update itself, which is

but who knows what their timeline JS. I'm actually surprised there's not a a polyfill for it because

You could probably fill the scoping with just adding classes. Right? Like, you you back Yeah. But could you could you do this? You couldn't stop it, you Node? You probably couldn't stop it, and then you throw CSS variables in there and and maybe Scott. So Where's Jonathan Neal? We'll have to see. Yeah. He probably is is how to stab at it, but that's it. Thanks everybody for tuning in and we will catch you later.

Peace.

Peace.