Hasty Treat - CSS Nesting 1

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

You know, patterns or whatever. In addition to new feature to CSS that, A

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, Really, the best way to think about when to nest your CSS

either

regular set descendants. You can select 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,

I'm happy to see the the continuation use of the ampersand as being, like, the parent selector,

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

In the CSS because

the regular CSS that you're used to, so and,

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,

siblings. You can select something that also has a class of, like, a tweet, but tweet with media.

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.

dot media, and and those will will correlate to what they do in regular CSS or your things like the tilde

at nest Rule. So if you feel like I was reading the reading this proposal here trying to understand

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

You can just go ahead and use the at nest selector.

where, like, you can just write a selector inside of another selector, that is not possible

CSS variables are so powerful Compared to SAS

key. Welcome to Syntax. In this Monday, hasty treat, we're gonna be talking about

No. Thank you. No. Thank you. No. Thank you. Yeah. There was, like, Sewage pumping out

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,

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

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

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 It can take CSS that is commonly written as maybe 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.

maybe, like, 20 feet down. It was, like, crazy.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

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

Monday. Monday. Monday.

Boss, and Scott

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.

As our sponsors today, Sentry is the error and exception handling tool of your dreams. Head on over to century.i0.

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,

Gross stuff. Yucky yucky. No. Thank you. So I'm sorry about your septic issues. That sounds like 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

So As of March 18, 2021, 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 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 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

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, Or the what is that called? The chevron, the arrow. The chevron.

Early on, they they rolled out nesting, which means that if you have a selector 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.

and then you just get this really sweet, syntax. Thanks so much to Prismic for sponsoring. Sick. Alright.

Website, prismic.ioprismic.i0forward/ 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

and then you wanna write a selector inside of that, You can, and it will compile down to that there'll be a CSS next And now that I'm looking at this, I'm like, is 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 be really, really flexible, which is a 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

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 which is a awesome headless CMS with a REST API, and a GraphQL API.

regular top level CSS selectors. And that really cuts down on a lot of

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

Having to duplicate CSS or doing very generic class names where you might have scoping issues,

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

UI in order to create all your content.

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.

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.

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

because this is, kind of seen as a foot gun occasionally for some people. But when you nest your CSS,

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

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.

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,

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

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

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

I feel would be kind of annoying? I worked with CSS variables, so you could You could simply just change a CSS variable 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 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 Who knows? Yeah. I'm also thinking about this. I was thinking, like, can we just 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

to media orientation landscape

and they showed that that CSS is equivalent 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,

that instead of just And we'll we'll link to and fix a whole bunch of Disgusting septic issues we had, so so thankful that that's all solved.

min inline size greater than whatever, And that was nested within that orientation landscape, Use that is century, 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.

in a nested media query the drafts on the CSS working group to show you what this looks like. But Like you can in Sass, 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

is really, really nice. I don't even know if Well done, CSS. Because

where you're scoping to something, that's when you would want to nest it. Like I mentioned,

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 all of those must start with a what's called a nesting selector, and that is the ampersand.

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

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,

is when you have code that you would typically

the container And 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

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.

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, redundant,

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 Transpiler, like, we have bowel transforms So CSS nesting,

write unnested 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? orientation landscape, and then they had some properties. But then they had an at media a style directly to that specifically,

and each item in your navigation,

Parent child selectors. And second, it becomes

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

set this thing to be white, 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, Will it break older browsers? I don't know. I I I usually, they don't because

You can set something to black or assign to white. And then if the person prefers

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,

A dark color scheme because there's a media query for that, then you can go ahead and nest

But pretty much, it's it's exactly the same thing. One kinda cool thing about this, though,

I think there is a couple little edge cases where some weird selectors will only work with the at nest, for.

but

If you wanted to the nesting selector, which is the ampersand, there also is a

additionally

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% or in any sort of nested selector, which is really cool. And I'm just like, wow. Well done.

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

is that

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

That compiles down to the equivalent of something else. Right? So I'm assuming

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.

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,

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 a crappy time.

media queries and and live Variables inside of them. Yeah.

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.

that backwards compatible? Like, will this if you ship some of this to older browsers,

they have to maintain backwards compatibility.

Head on over to syntax.fm

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.