Hasty Treat - CSS Nesting 1

key. Welcome to Syntax. In this Monday, hasty treat, we're gonna be talking about A new feature to CSS that, while it's still in a draft, it's kind of the first look that we're getting to see at this feature, and this is one of those things that anybody who's using CSS preprocessors for a long time are going to rejoice at. I'm talking about CSS nesting. So as always, my name is Scott Talinski. I'm a developer from Denver, Colorado. And with me, as always, is the Wes Bos. Hey, everybody. What's up, Wes?

We just had a plumber come to our house and fix a whole bunch of Disgusting septic issues we had, so so thankful that that's all solved.

No. Thank you. No. Thank you. No. Thank you. Yeah. There was, like, Sewage pumping out in the street. It was so weird. In our neighborhood the other like, last week Oh. And it was our our neighbor like, Across the street neighbors, and it was, like, maybe 9 o'clock, 10 o'clock when, like, the you never have you seen ET? I think so. Yeah. Yeah. It's one of the 2. There was, like, the scene in ET where all, like, those, like, crazy government people show up with spotlights and there are few like, They have the house on lockdown. It's, like, very scary.

That's, like, what our street looked like. There's, like, 800 trucks showed up out of the middle of nowhere at, like, 9 PM And just started excavating, like, maybe, like, 20 feet down. It was, like, crazy.

What a Crappy job that must be. Oh, yeah. You saw yes. Crappy job indeed. You saw, like, when big tubes go down there and pull it out, it's, like, covered in Gross stuff. Yucky yucky. No. Thank you. So I'm sorry about your septic issues. That sounds like a crappy time.

CSF. You already said crappy. I don't know. Yeah. Okay. So before we get into CSS nesting here, let's talk about some of our sponsors. We have Prismic and Sentry As our sponsors today, Sentry is the error and exception handling tool of your dreams. Head on over to century.i0.

Use that is century, s e n t r y dot I o. Use the coupon code at tasty treat, all lowercase, all one word, and you'll get 2 months for free. Now Sentry is the perfect place To keep track of all of your errors and exceptions, it catalogs them. It connects to GitHub, all the tools you know and love. It allows you to connect to Specific releases or even see who pushed the bug essentially that well, I don't know, a custom sort of issue that popped up in your century. You could see the exact commit That caused that issue, attach source maps to it, and and get a view at the source pan. This is a tool I live with and use every single day, and I really, really enjoy it. So check it out. Century dot I owe coupon code at Tasty Treat. We also are sponsored by Prismic,

which is a awesome headless CMS with a REST API, and a GraphQL API.

They are really cool because you just sign up for Prismic, and immediately, you can Start creating your without writing a single line of code, you can immediately start creating all your data types, all your relationships, and then you just get this really sweet, UI in order to create all your content.

They have a really cool feature that's called slices, and that allows you to be really flexible with the type of content that you're building. So instead of having, like, an about page, you could say, okay. I'm just gonna make a page, and I'm gonna click it together. We're like, give me 3 people, and then let me throw in 3 products. And then let me bring in 2 pets or whatever whatever data types that you want. You can sort of click them together, and be really, really flexible, which is a Really nice thing to have in a CMS because we all know, like, us, the developers, want to be very rigid, and then the marketers that actually use this stuff at the end of the day want it to just I just wanna make it do whatever I want it to do. Mhmm. And Prismic will do that for you. So check it out if you are building your next Website, prismic.ioprismic.i0forward/ syntax. Thanks so much to Prismic for sponsoring. Sick. Alright.

So CSS nesting, this is something we've been waiting for forever. It's been, I think, what was Sass or or less, The 1st languages that rolled this out Sass was the first one that I saw. Yeah. I think it was either Sass or Less. One of those Early on, they they rolled out nesting, which means that if you have a selector and then you wanna write a selector inside of that, You can, and it will compile down to regular top level CSS selectors. And that really cuts down on a lot of Having to duplicate CSS or doing very generic class names where you might have scoping issues, Awesome. And it's really one of the huge things that we've been missing from CSS. Now that we have variables and color functions and all that good stuff, Nesting is really one of the last, like, kind of things that you have to reach for a a preprocessor for.

So As of March 18, 2021, there is an editor's draft, which is this is, like, the first time we're seeing kinda they're putting forward this. So, like, This is what it's gonna be like, and this might change because it's it's just a draft. But at this point, they're done with a lot of the discussion, and they're putting forward what it might be In CSS. So, obviously, don't go ahead and use this. It's not even in the browsers yet, but I'm really excited to see what it looks like in the browser, and we're gonna talk through How all that works today? Sick. Yeah.

I am really, really pleasantly surprised by this. Not not that I I guess I'm not pleasantly surprised. I'm surprised to see it existing, and I'm happy that it does.

So I guess do we wanna start off with a little bit about why the heck You might want to nest your CSS because this is, kind of seen as a foot gun occasionally for some people. But when you nest your CSS, It can take CSS that is commonly written as maybe redundant, as in, like, you have container, and then inside of container, you have an item, and then inside of Item you have an anchor tag. Let's say you're trying to scope a style directly to that specifically, then you would have dot container dot item and then a. Right? And then if you also wanted to style the item and you wanted to scope it to that container, you would then have dot container dot item. And you can see that, like, what you end up having is A bunch of CSS that is essentially saying the exact same thing, and then let's say a class name changes, then you have to do a find and replace. Not that a find and replace is the end of the world or something like that, but it can start to potentially have some issues where you have a string that's being updated one place and maybe not somewhere else, and maybe you can get some style bugs where some CSS becomes missing, because that Gets out of sync. So what nesting does is allows you to write it once where you have container then brackets. And just like you would normally have your properties inside of there, then you would have item.

An item allows you to put selectors inside of that where you normally have properties.

I've been writing CSS like this for so long at this point. It's been since, like, I can't even tell you when I started writing Sass. It was 2020 12. Yeah. Probably, like, 8 years. I've had 8, 10 years. CSS. You know what? I've been writing CSS for so long like this that this seems like the way of doing it. Either way, what nesting does is allows you To have CSS that's easier to read because it all visually looks contained, it's easier to write because you don't have to have duplications of tech strings like that, and it prevents refactoring errors.

And in many cases, I've mentioned that it's potentially a foot gun, and it can be a foot gun when people just decide to straight up start nesting everything. It's like throwing, like, a parent body around everything and then a a main, and then you're just, Like, you're almost replicating the structure of your HTML and CSS, and that's not really the way to do nesting CSS. That's way, way, way Overkill.

Really, the best way to think about when to nest your CSS is when you have code that you would typically write unnested where you're scoping to something, that's when you would want to nest it. Like I mentioned, the container Item, then container, item, anchor, you know, those types of things or maybe container. Then you would nest those all under container, but don't just nest things for the sake of it. Because, again, once you get that over nesting issue, it become makes refactoring kind of a pain that ties it really closely to the structure,

and, You know, it it can be over scoped. Yeah. That I think that's a really good point is don't tie your CSS nesting to the structure of your HTML. Like, I used to do that. I would have, like, a nav tag and then an unordered list tag and then a li inside of that and then a link inside of that and then a span inside of that. And then what happens is that, first, things get super specific because you're writing these super nested Parent child selectors. And second, it becomes really hard to change what the HTML looks like. So what I've sort of, I'm pretty sure this is how you do it as well. Let's just do a component base, meaning that, like, you might have a a tweet or a card or a company or a link or a nav. And Every single time that you have a component, a thing in your design, then make a new class for that and nest all the stuff that goes inside of that. Like, As these things get bigger and bigger, it's probably means that, oh, I should probably refactor this out into its own component. Like, a. An example might be if you have a very elaborate navigation and each item in your navigation, like each anchor link has a bunch of Nested spans and and whatnot inside of it. Maybe it's time to bring that thing out into its own component instead of just

Nesting it really, really deep inside of it. Yeah. Because that nesting can it can hurt the the reusability

of your code. Yeah. So let's talk about, like, what does it look like in CSS, not what does it look like in different languages. I'm gonna say it's very, very similar to Sass With the exception of just a couple little things here and there. So there's 2 ways to do nesting in CSS that is in this draft or this proposal.

And in order to nest something, so I'm gonna use a a a div with a class of tweet as an example here. And then inside that div with a class of tweet, You can select direct descendants. You can select regular set descendants. You can select siblings. You can select something that also has a class of, like, a tweet, but tweet with media.

And all of those must start with a what's called a nesting selector, and that is the ampersand.

And we'll we'll link to the drafts on the CSS working group to show you what this looks like. But Like you can in Sass, where, like, you can just write a selector inside of another selector, that is not possible In the CSS because they they say for readability's sake, they're not gonna be allowed to do that. So if you wanna nest Something inside of it, you must use a nesting selector, which is the ampersand, and then go ahead and use either the regular CSS that you're used to, so and, face tweet or and dot media, and and those will will correlate to what they do in regular CSS or your things like the tilde Or the what is that called? The chevron, the arrow. The chevron.

Is that does anybody call that the chevron? Is that like a No. What what do you call that? That's the Chip and Joanna name for Closing.

Yeah. The close close bracket, I guess. Greater than? Yeah. The greater than. There you go.

I'm happy to see the the continuation use of the ampersand as being, like, the parent selector, And I I gotta feel like that comes straight from Sass. I think it was probably the the first ones to do that. So it's nice to see that. You know, when CSS variables Came out, and the syntax was so different. People were a little bit turned off by the fact that the syntax was so different despite the fact that, CSS variables are so powerful Compared to SAS variables, so Mhmm. I'm happy to see that. What it's going to relate to is just, like, the a lot of the code that we've authored in the past It's probably going to be mostly valid. Not that it will be all valid, but it'll be mostly valid here with the new CSS nesting. And and that's a relief to me because the last thing I wanna be doing is realizing that all the SaaS I've written for the past, you know, 10 years has been the right the wrong, You know, patterns or whatever. In addition to

the nesting selector, which is the ampersand, there also is a at nest Rule. So if you feel like I was reading the reading this proposal here trying to understand what the purpose of having both of them was. What I got out of that is that Sometimes it's a little bit harder for people to visually parse if something is nested and whatnot, especially if you're not doing proper indentation. Mhmm. In addition to that, There also is an at nest rule. So you just type at nest, and then you rewrite all of your regular selector. So instead of using the ampersand, You can just go ahead and use the at nest selector.

I think there is a couple little edge cases where some weird selectors will only work with the at nest, But pretty much, it's it's exactly the same thing. One kinda cool thing about this, though, is that If you wanted to additionally add some CSS to something so a really good example, there's here Here on Twitter from Adam Argyle. We had him on or Adam Argyle, who had him on the show, I don't know, 6 months ago. He shows this really cool example where You can set something to black or assign to white. And then if the person prefers A dark color scheme because there's a media query for that, then you can go ahead and nest media queries inside of your selectors. So you'd Say at media prefers color scheme or at media max width because that's really exciting to me because something I use Nesting for a lot is writing media queries inside of existing selectors. Mhmm. And then you just use the ampersand curly brackets. And that is not a descendant selector. That's not a sibling selector. That's not a any sort of selector. You're basically saying, set this thing to be white, but If we meet this media query, also include the following CSS as well. And that's really cool because you could say, set this thing to be 500 pixels wide, But if it matches the media query of min width 500 p x, then set the width to a 100% and cap put a max width on it. So that's really, really exciting to me that this also works with media queries as well. Yeah. I like their example where they showed a nested media query, and they had

At media orientation landscape, and then they had some properties. But then they had an at media min inline size greater than whatever, And that was nested within that orientation landscape, and they showed that that CSS is equivalent to media orientation landscape

And Minh inline. So it yeah. So it allows for the combination of media queries in a much more, I think, organic way. That is so cool. Yeah. Because you could say, okay. All the users who are in landscape mode Mhmm. The following code applies to them. And then inside of that, All of the users who meet this specific use case or all of the users who are currently in print styles, that's another one you could do as well. And then it will just combine them all together, which is really, really nice. I don't even know if

something like Sass does that, does it? I honestly don't know because I don't I mean, it it is funny because the syntax is a little bit different from the usage of the ampersands

needing to be in there because in in Sass, you would just nest that without having the ampersand, and then I don't know how it combines all of those. Yeah. I don't know. Yeah. I'm just looking at, Stack Overflow here. I'm like, does SAS do nested media queries? And first of all, I don't Know if I've ever actually written a nested media query, but it's nice to know that for those specific use cases This is where where you're doing things. You you possibly could do it. It could open your mind in different ways. I believe that. Totally. I'm just looking at this being like, okay. Is there any limitations that I feel would be kind of annoying? I worked with CSS variables, so you could You could simply just change a CSS variable in a nested media query or in any sort of nested selector, which is really cool. And I'm just like, wow. Well done.

Well done, CSS. Because usually what happens with the CSS stuff is that we have to sometimes we have to make concessions because CSS has to be Backwards compatible.

And now that I'm looking at this, I'm like, is that backwards compatible? Like, will this if you ship some of this to older browsers, Will it break older browsers? I don't know. I I I usually, they don't because they have to maintain backwards compatibility.

But I'm just looking at it and be like, wow. This is this is really well done, and I don't think there's any issues that I would say, it's cool, but You can't hit these little use cases that you could in Sass. If anything, it's the other way around because now you can use media queries and and live Variables inside of them. Yeah.

I don't know. Yeah. Because that was, like, a big thing about the CSS variables. It was really easy to use them with a fallback. Well, Easy issue. Didn't didn't cause any major issues. Yeah. So, yeah, I do wonder about that. Like, if you author that, are are people gonna be out of luck? But then again, the browser story with the exception of Safari, all the browsers are basically updating themselves at this point.

So Yeah. For the most part. Hopefully, that's not a problem we have to worry about in the future, although that's, you know, never never not been a problem in CSS, so

Who knows? Yeah. I'm also thinking about this. I was thinking, like, can we just transpile all of this? Meaning that, like, it's not like CSS variables where this is actually a feature in the browser. Mhmm. This is just syntax That compiles down to the equivalent of something else. Right? So I'm assuming that there'll be a CSS next Transpiler, like, we have bowel transforms

for this type of thing. So maybe we'll be able to use it sooner than we think. Yeah. And and with any of this stuff, I mean, post CSS This is really kind of turning into the babble of CSS where you can author tomorrow's CSS today and have it transpile and just not have to worry about it. So I would imagine as long as you run post CSS, which, obviously, you don't have to. But if you do, I I would imagine you just don't have to worry about it any of that. Beautiful. Anything else to add? It's pretty simple little spec. Give it a quick read over, and you can kinda understand the whole thing. Yeah. You know, I feel like the the The natural progression of everybody who adds nesting to their CSS at some point is to first go ham and overnest and then dial it maybe too far back, and then It's like a a little adjustment period. So just really just experiment with it. See what works for you. See what's best, but don't be afraid to nest. It's very, very powerful, especially, You know, it could be a fit foot gun, but it's not guaranteed to be a foot gun. It's one of those things that will save you a lot of time typing, refactoring later. So, Yeah. Give it give it a whip. I would probably recommend throwing it on c s or Sass or post CSS right now if you're not doing any sort of nesting whatsoever. Like, if that's a thing, you're not doing any nesting, I would give it a try in some regard because it will change the way you author CSS. And if it's gonna be the future way of authoring CSS, you might as well get used to it now. Alright. That's it. Thanks so much for tuning in. We'll catch you on Wednesday. Peace. Peace.

Head on over to syntax.fm for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.