CSS Nesting is Here!

I remember seeing it and being like, oh, that's kind of annoying. That stuff has gone away, thankfully, IE3 or something silly like that. So you can start using this today.

And we won't do too much mouth coding in here, but I hope you get the idea of what the benefit of are nesting more than you should, buttons on my website where a span has a price in it. So I want to make the price a little bit bigger than the text of the button.

give you the equivalent

You open up your curly brackets like you normally would in CSS.

in the way that you simply write a selector.

That type of thing is, is that you don't have to And it's like it's like 5 or 6 lines of code. I've tweaked it a little bit to add a couple more things myself. But when I rewrote

and you can simply just nest Your regular selectors inside of it. And what that will do is it will say, All right, select these items, but it will essentially just extend the selector to the parent. So if you say, And SaaS, nesting still, when you're viewing the compiled output, you have source maps that will Ideally tell you where where this piece of style was. But if you're just trying to do a quick search on your codebase Command f. Yeah. You can't find it. Yeah. Exactly.

element as as you normally would. But when you want to nest something inside of that selector, break out of the current nesting level, Add a container or media query, and you don't have to

like a button, right? Then you can just write button inside of it or button dot like, I did the example of having table rows. So I have 3 table rows. I select the middle one So has a it's always this, except Adds dollar sign to query selector.

Yeah. And anybody who's been around pre SaaS will know that the pain of selector or the the parent Parent selector here. Yeah. So one of the

write

longer selectors that prefix themselves if whatever.ref.matches

We'll talk about the ampersand in just a second because that was initially and you may have have seen it. A lot of people are like, oh,

inside of it.

With nesting, it's just syntax, so meaning that a node list The grid areas,

rejig any of your layout because

This is not a new feature CSS has. You can't use that until all of the browsers support it or you can't use it for like mission critical things All right. I have a let's say we have an audio player. So you have dot player, right? And the player can have a border and a yellow background.

because then I can just change how big the grid area is and it will snap too. I don't have to worry about alright. Stop at 5, and then the next one start at 6. Yeah. And it it tracks with how you think about content in a grid. You don't think about this content goes in the 2nd column and spans 3 columns. You think, no. This thing goes in the in the content Here's something that does not work that did work with SAS.

rendering was, I had to go all all 3 of them and change the start and end. And I was like, damn it, I should have just named CSS has, you can now do a previous It adds map to a node list because a node list you can't map over unless you convert it from a node list to an array.

Another tweet tip a couple of days ago where I laid out the differences between everything that you're going to use is .on

area. This goes in the sidebar area. You know? So we quickly have talked about in the past,

And I built a little visualization when you are styling something, You are grabbing on to the smallest

you can redefine your grid areas

you simply said go into the sidebar.

What's really nice about that is oh shoot, I'm nested too level too deep. Now I got to go to a fresh c s No level indentation and start again. If that's the problem, remember, My checkout and everything from jQuery Lightning CSS is a post CSS We got better selector. We added it to the browser. We don't need jQuery anymore because we

meaning that of is no longer necessary Nesting

And then if you change how big or where the sidebar is, it will simply snap to you don't have to do it like I did It works with piece of that. So my example of a player earlier probably actually is not a good example because that you are only using inside of the player, maybe that makes sense to style inside of But if you're like, I want this button style in the player, but we also want the button style on our forms.

I have loved CSS nesting since I very first tried it. One of the very first

to have it in in real CSS,

but it's not going to happen.

Something that I've been dying to use. Yes. So first of all, nesting Alright. This parent thing, if it it has the following styles oh, by the way, also, if it has an image, do these following styles. Or if, by the way, it has,

We got those changes, and it it feels Like the ideal API for me, but also

deeply,

works is apply some styles. And the beauty of has is that you can select it based on other things in the page. So here we're saying is that when something has

I was very delighted when in fact, I I almost didn't believe it when people start talking about nesting as being like, oh, here, you can just do nesting like Sass. Now thinking yeah. No. It's it is Kinda like SaaS, but it's not quite it's not quite like that. You know? But

Video series I did on YouTube was in Sass, and one of the first things I covered was nesting. And I gotta say, it feels fantastic

So Yeah.

I know y'all want it,

a class to the end of something using the ampersand. So something that people used to do in Sass, and I

strings, right?

where in the CSS a specific style was authored Meaning like a dot for a class or a pound for an I. D.

It works with media queries. This is a beautiful thing is you can stick a media query inside of the thing that you want to style.

Because you're concatenating like things that

But you cannot do that in the CSS version of nesting, which I gotta say because I did not use this technique, ampersand.

so that way it would append the word

And this can be

append Styled specific links that were time stamps to have a completely different style. So you're able to use a attribute selector

and then your underscore underscore element And then ampersand hyphen hyphen modifier nested directly next to it. A future sibling.

It. You cannot

I found it tricky, nesting. So first of all, this is very, very close to the Sass syntax.

I'm fine with it. But it's something that, you know, those of you out there who may have used that technique in before should be aware of.

must confess this was never a technique that I personally enjoyed. But I did see this being used a lot it. Where you'd have, like, in BEM style syntax, you might do a class of block and then ampersand

element or the element's name to your block, or it would append the modifier And especially on the syntax site, it's like anytime that I'm thinking about using a media query, I'm almost always reaching for a container query now. And it it feels as good as you would have hoped it would have when,

add event listener.

Lightning CSS. Oh, yeah.

You get you can, possible

Do the whole like the other. The other thing with jQuery is it fails silently, Pause or simply just .pause,

To the language. It's the, the the actual example of j let's add jQuery to the browser. Yeah. But Exactly. This time with CSS. CS. I was actually thinking about that. I was like, I think we'll have a show on

Or no, map rules.

It adds,

is, yeah, because of, like, react documents.

jQuery, what garbage that was. And it's like, No, that literally was the best thing ever. That's the reason why no one uses jQuery anymore

I wrote a little wrapper don't even learn this. You know, like you maybe need to know if you try to use this directly in the browser, which is a bit of a pain.

were so good, jQuery, you can just not learn this and just use it as you would expect it to work.

like timestamp link, which in some cases is okay. But

about using it with the has, which, man, combining it with this with the has, Get over it already. And,

That's a timestamp link, then style those differently.

You could imagine in the past, we may have done that with, like, a a class. You would have had to have a special class on here that maybe is being even done with your templating language. Alright. In this particular one, it has an image, so therefore I'm gonna add a class here in my actual markup. But now we'll be able to say,

for the parent selector. So whenever you see an ampersand, you say, okay, if selectors that are all associated with the same group. Exactly. I think you can CS. And you should think about nesting selectors as a component,

logic out of your Templating language like that. If we had to do that in our template, that would have been like In it's already implemented in Firefox equals whatever, then add the class of all articles. So you select article, open up your curly brackets, and you say width 80%.

So anytime you see the ampersand, it's the parent. And likewise, that parent works with So many of the pseudo selector types that we have used in the past, and I I love you have an example in your Twitter thread,

Right? One of the things that we did in the in the syntax site is that we

Then if you want to make a wide a version of that because you pop a class of wide on it, you just say ampersand wide. And what that will do is it'll extend the current selector and say, all right, when there's an article with the class of wide, Give it a width of a 100%.

referencing whatever the parent selector would be. So that is helpful because you can say like, all right, I want to style,

every selector that you could Possibly imagine nested inside of it. But the next thing we'll talk about is the ampersand inside of how do you make this work on all the browsers? So it is just

You know, a and I don't mean has as the pseudo selector,

CSS nesting. So it's important to understand what the ampersand does. The ampersand stands

Yeah. And it makes it super easy to read. It contains it all. It's keeping it all in one spot, especially using this ampersand, essentially

That will be alternative.

pseudo selector is going to really change things for us where you'll be able to do Colon has image. So now if the article has an image, now all of a sudden, this article is something completely different.

Inside of something, the plus sign, which is something directly next to, and the,

So if you don't know the sibling selectors are, we have the little greater than sign, which is for a direct child, like the thing directly with the general thought Process behind CSS nesting that it feels like 2 peas in a pod for a feature set for me. Exactly. And you don't even have the ampersand as a breakout selector, and this is not something that I had considered.

it it can make for some handy stuff. You know, for instance, this Maybe has gone out the window a little bit with the advent of,

a little bit more often than you you might expect.

Yeah. Wait. I I wonder what that no. What it's actually called. Let's look it up. Hold on. We are professionals here. The general sibling selector. General sibling. Yeah. General sibling. I I was going to say when I say future sibling, it makes sense, but it didn't seem like exactly

A future sibling. Yeah. I've never heard of being called a future sibling. Is that something that that you call it for? Probably do that. Actually called. Okay. Honestly, I don't know the names of anything in web development.

But you can use these all within nesting, and,

A sibling that's on the same level of, but not necessarily

still, I find myself using the next sibling for a full archive of all of our shows.

tilde, which is

gap the gap property inside of Flexbox, but used to used to have to do things like, Alright. I have all my list items, and I want every single one that's next to the current list item to have a margin left of 5 pixels to get them That equal spacing between them. So that way you're not putting it on the first one. They used to be a nice little handy technique. Now granted you don't have to do that anymore, but,

I just that it's one of those things. Like, reading it, it just breaks my brain. And probably listening to this, it breaks your brain. So it's probably not All that helpful, but it's good to know that, You say, all, if not all of those like,

So that essentially is read as dot parent dot child, meaning that you are

make it a different color. You know, like sometimes you just have these one off styles and say, Okay, then you have a syntax error. And then you always have to check if the thing is there Or if you want to add an event listener to something that's undefined, then that's a syntax error. So the nice thing about jQuery is that it just failed silent. If it's not there, I don't care. Don't I'm attaching that event listener. Well, that's sick. Alright. Well, this episode's getting a little tasty, so let's put a, a stopper here Oh, yeah. For this one. I got one more thing to add.

So

then element selector, Welcome to Syntax. This is the podcast with the tastiest web development treats out there. CSS and all of the tools, all of the libraries, earlier versions of the spec and actually the implementation

And if that were the case, you'd have to go all the way back To the top and say, all right, well, when the article has that idea of post 40 2, then select the h two's inside of it. And then that CSS lives separately from the rest of your H two styling, you know, and that's kind of annoying, especially if you've got, like, variables that you need to scope and reference.

Yeah. You also had an example using, like, a key feature of CSS, which is the ability to write a class that then you can assign to whatever because now you've Essentially written something that's an ID, something that's hyper focused downwards into 1 singular item. I find myself doing it a lot in React components or Svelte components where,

But the way you have this,

But otherwise, then Let's get on into CSS like what I had seen it being. General sibling, that doesn't make sense because You could have a sibling before

using

and you want to like, let's say you have I think I understand why people get angry because they're sort of exhausted

You'll find it and and solve your problem.

because somebody from marketing asked me to Experimentals And then use the ampersand to reference the the parent selector, which is apparently you can do that in SAS. I had no idea that that was a SAS feature. Yeah. I didn't know that either.

For this one situation with CSS Grid. And I said like, alright, this is it. This is downloading, this is rendering, this is execution.

stands for the parent selector, and you can interpolate that selector syntax,

wherever you want. So what you can do is

The ampersand will allow you to basically And that is really nice because previously with media queries, you had to write your styles.

It's very bizarre. So the ampersand that they just wrote their entire app in SaaS.

an H2 tag And you're styling your H2 tag and then you say, Okay, but Link that has an h ref that

Google West Boss CSS nesting breakout.

written here is that you have a child class. And then inside of the child class, you have dot parent

start fresh from the top, the dollar sign. Bling. Js is like a tiny little library that's to me, that's the benefit of this type of thing. It's not that Sass is bad. It's that Sass is so good that we literally added it standardize it. And now I guess that makes sense to be Like maybe for dev tools or for BL to reference it outside, but When it hit it, if this was a player space.

the outer selector it as the inner selector simply by using the ampersand, and that honestly breaks my brain a little bit. Me too. It doesn't It doesn't seem like something you'll want to do that often, but I'm shocked that you can't do it, honestly.

nesting when done right and, you know, use like a little bit a little bit of seasoning in your your feed. It's really well. It's really nice. Makes makes your work a lot easier sometimes writing selectors and stuff. But I'm doing good. Me, personally, I'm doing,

very angry about nesting, which I understand because they probably have dealt with a lot of

But I got flooded with post CSS, right? Exactly. Yeah, exactly. A lot of people were like Pause.

Doing super good. I'm ready to talk about nesting in, like you said,

Boss, and Scott.

is here, and we are going to tell you all about it, how it works, how to get it to work in every single browser, and it's already in. You're going to be using PostCSS

why that's handy and and and whatnot.

and it can be compiled back to every all the way back to

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

to actual work after hack week because hack week stuff is fun, but actual work is Fun and productive as well. So I'm feeling energized, and I'm feeling ready to go on some actual code stuff. How are you feeling? Good.

So I put out a tweet the other day about CSS Nesting. It had landed in and you can say, all right, well, when I'm inside the player, select all the buttons. You You don't have to give a class to every single one of those buttons. You can simply just select them.

You know, just just fill in fill in the flow of of all this stuff. You know? We're gonna be talking about Hack Week in the

CSD.

Firefox 117, which means that it is now in every single browser out there, if you don't name it and you reference container inside of a nested, it will just Look up

know, you can have bad feelings about nesting because of how hard it is to change anything, but,

it. The, Tasty episode this week, and it feels really good to come back

Monday. Mon Monday. Hey. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

Garbage code, Basically what I was saying, as I say, c s t r has and just putting it on a CSS rule, often, that's a really good choice.

the craziest,

the gotchas to think about.

Garbage code? Yeah. You can you can look at garbage nesting code, and, you a specific.

I'm feeling great.

And then if you wanted to write some styles You know, with, Sass. Things that were so good, we added them to the browser. And sometimes people look back and they say, Ah, And now there's this new thing like I don't care about that type of thing where it's 98% the same and I have to spend some time moving it on over.

Level deep. Yeah. And it also works with container queries, which gosh, man.

which you probably shouldn't do,

the beauty of Sass is that you could stick a media query

It really nothing beats it. Container queries rule and the fact that you could just nest inside of them makes it really nice and easy to feel like it. It's all contained inside of 1 little wrapper, 1 little thing, and it it fits so well

To name your container if you are asking. No, I still do anyways. Do you? Elsewhere Express, We had talked we've done a show about 2 years ago about the proposed syntaxes, Oh, my gosh. It adds

in one selector. And that, to me, that's really nice to have it all in 1 component, in 1 space.

and then you can put the media queries with that container. And all of the logic as to how does it work is just

I don't know if you've been using container queries much, but I have.

Let me top level write a media query and then write all of those selectors again

That's a good thing to yourself is like, no, that shouldn't be nested. That should be its own component that should have its own class a card component, and that card component might have

parent, Child, parent, and then looks like you're you're

duplicate,

even indentation wise, the same way that that HTML structure works. To me, that aspect of it is makes it that much easier for me To reason about my CSS code when I'm looking at it because I'm not looking at this here's this massive string of different selectors. I'm looking at as in here is this unit, And inside of this unit are different

meaning that

more terse. Right? You're not having to write the the same thing over and over again. But in my mind, it. If you are writing something that

on it, and I should be able to reuse it. So only nest things

a long even even like a a couple things nested chain was just you'd have parent, child, child,

You've now really written a With CSS nesting is that people were just nesting everything inside of everything inside of everything. Next thing you know, You have these hyper specific selectors

anywhere else on your application or your website. Yeah. Because otherwise, star equals, I think it was pound t equals and that's a

CS over and over and over again,

selectors

In favor of code that not only is it's So much momentum behind improvements to CSS right now. And it feels like the next thing on the docket is gonna be has, which is In Firefox underneath a flag right now and everywhere else. So, hey, maybe we get to do a full episode on HAS tips coming up soon here once HAS officially drops into every browser. Thanks so much for joining us in this lovely hasty treat.

I guess the player itself will have have some styles, but if you are using You would have to say ampersand button because Over and over again, you can simply just you can write some simpler selectors, support for CSS nesting, it doesn't do the you still have to do the ampersand thing we talked about earlier.

duplicate selector

and this really allows you to minimize that

writing,

here's a parent and these things are contained within this parent, the code now kind of mimics the structure of the HTML in a way, Interesting.

then that should be its own component. So if you have a button

Having to write, I also like that you can use this with the sibling selectors.

like, you thought about it back in 2011 or something.

Standardized. So And that's really cool because it takes the pieces of that player anywhere else On the website, of this nesting syntax make a special change, you know? that were to be expanded, How are you doing today, Scott? I'm doing good, man.

But the benefit to this over Sass and you can go back to episode 603, can vanilla CSS replace Sass yet? a sync, defer, script tag and module,

This is standardized JavaScript, or sorry, standardized CSS,

Well, why not just use Sass? I don't know, if it was a property value or something like that. And they said they figured out that they just let the parser crash And they restarted it again. And somehow that was a way to tell that it was a nested bear selector inside of

you are still writing regular CSS And it can be transpiled compiled As deep as you possibly want,

In Safari and Chrome currently was that And, to vanilla JavaScript, to CSS that is supported in all the browsers, so you do not need to sit and wait To use this type of thing, just like your Sass had been it doesn't have to be a jQuery plugin to make it work. Right? Yeah. But the dollar sign was pretty cool, though. Right? I mean, that was pretty cool. Right? That was. Bling. Js. That's I use that a lot on my own project.

there was no way for them to just nest the selector right inside of it. It was a We had Adam Argyle tell us about this. He said it was like a parsing limitation but you can put them at any And then inside of that, you want to maybe select blog post, I'm going to compiled, you can do this. And maybe that's another thing I want to talk about as well is people are saying like,

an element then you simply write a selector like, I do this in my The benefit of that is you see you get live variables, you can do container query lookups, you get all of the scoping like this is.

if you are nesting a I call it a bare selector. If you're nesting a selector that does not start with a symbol, some I think for each to inside of anything. So you could say, alright, I have a container, when this H2 is inside of this very specific and there was like a lot of like, that's kind of annoying. Do they really have to do that? the same thing with nesting. It's tricky to find

where the CSS parser had no idea with a couple of little things here or there. So I'm very happy with and that will If you're selecting a bare And every time I wanted to change how big an element and then you do that for each On the end or and if it comes back with nothing, Sometimes if you're nested deeply

Then you had to previously put an ampersand in front of it so you couldn't just say, And you can nest them and you probably

All right. I'm selecting a button and then inside of the button, any spans t r hover. And what that means is that when a table row

So the ampersand in front of like But I I bet that will maybe by the time we this episode comes out, it will be fixed. Word.

to transpile these for older browsers anyways.

especially because you can have kind of, like, groups of names for things. So So you can have, like, a start and an end and a content and a content. And then I could tell, I wanna go from start to end or I wanna go from Content to content, and that will just fill up the content column or the side column or whatever. Check it out. I actually did it in the,

the scope tree to its parent container and then apply those files to it. I'm the type of dude who writes return types in TypeScript. So, You know, if even though it's not necessary for some reason,

Chef's kiss. It's lovely.

the layout class in the new syntax site, and it is

come back to that. Yeah. Do you know what I also been doing too? This is A side note, I've been naming all of my grid areas now. Anytime I have grid templates,

Yeah.

it feels a little bit more explicit for me. Yeah. You're explicit. I I don't think I've written enough container queries to have too many strong opinions on it yet, so maybe we'll have to

grid columns, anything, I'm naming those grid columns. I'm naming those grid rows, and it is awesome,

Well, thank you so much for joining us today. CSS nesting, gotta gotta love that we have it.

I know Tailwind itself is moving to Lightning CSS from PostCSS, You apply all of your styles to that When you know that it is part of that component and will not ever be reused to

CSS is just one of those

and I believe that we will start to see a lot of people moving to Lightning CSS in the future.

Okay. Well, that is it.

Head on over to syntax.fm

It's written by Devin, who also created Parcel,

And don't forget to subscribe in your podcast player To look for a specific string inside of a time stamp, then you'll be able to say ampersand, the attribute selector, and then style those a specific way. Yeah. Any I was wrong.

Or drop a review if you like this show.

when you could have had something that was more generic to the element block. Right? It would actually concatenate the strings for you in Sass,

more specific selector than you may have intended on writing. And and that is some of people's drawbacks

Alright. This is that like, shouldn't you not use that?

an h one And it might have a footer inside of that, and you don't have to like the footer of the card component isn't its own component. So you just style the footer and you put a border on the top and you make the Maybe make the font size a little bit smaller, you know. So that's the simple nesting.

and being able to be used in a reusable fashion, And you were almost, like, eliminating,

almost and apply it. And Immediate next sibling

because it's exactly what I would have hoped for. What what do you think about that? Yeah. This is

have gone away, and the syntax is to our delight, That you need to work in every single browser. Why? Because it's the browser literally has to implement it. Yeah, there's probably JavaScript polyfills and whatnot, but That's probably not worth it.

Sass is better Like, what's the benefit of this type of thing? There was a lot of people that were the selected element, and the tilde is not going to select that. Yeah.

Probably the ideal scenario for CSS nesting, which it really felt like it wasn't going to happen because that was the message was, hey.

And

pretty much what you would expect from SAS If if you can get away with taking that logic out of your templating The end result

plus and they have

a sibling in front of it that is being hovered, style me this way, Right? And we've always been able to style the next item, but now we can style the previous item. Yeah.

that is being hovered, so you select for a media query, you'd had to go, again, not inside of that selector, but you have to say, alright, well,

sibling selector, which is wild. So

And the one before it and the one after it, I want to blur out or style it in such a way that you're not you know, when you're reading a table, Yeah, you're not paying attention to it. It's hard to, like, horizontally move. So I was like, I'll blur it out or something like that so you can select.