CSS Nesting Is Here!  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: CSS Nesting Is Here! - Category: #podcasts - URL: https://share.snipd.com/episode/3316fca7-7ae0-4c6a-9a5d-dc9d77d1109d ## Document Notes ## Highlights - **CSS Nesting & Sass** - CSS nesting closely resembles Sass syntax, making adoption easier. - The final syntax is intuitive and largely aligns with Sass, addressing prior concerns. Transcript: Scott Tolinski I'm feeling great. Let's get on into CSS nesting. So first of all, this is very, very close to the SAS syntax. We had talked, we'd done a show about two years ago about the proposed syntaxes. And there was like a lot of like, ah, that's kind of annoying. Ah, do they really have to do that? And to our delight, almost all, if not all of those like, ah, SAS is better, have gone away. And the syntax is pretty much what you would expect from SAS with a couple of little things here or there. So I'm very happy with the end result of this nesting syntax because it's exactly what I would have hoped for. What do you think about that? Wes Bos Yeah, this is 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, I know y'all want it, but it's not Going to happen. So, uh, get over it already. And I was very delighted when, in fact, I almost didn't believe it when people started talking about nesting as being like, Oh, here you can just do nesting like sass. And I was thinking, yeah, no, it's, it is kind of like sass, but it's not quite, it's not quite like that. But I was wrong. We got those changes, and it feels like the ideal API for me. But also, deeply, I have loved CSS nesting since I very first tried it. One of the very first video series I did on YouTube was in SAS, and one of the first things I covered was nesting. And I got to say, it feels fantastic to have it in real CSS, that I've been dying to use yes ([Time 0:02:27](https://share.snipd.com/snip/dc7a323b-7925-40c9-8789-3fd4dbdc0891)) - **Nesting as Components** - Treat nested selectors as components, styling the smallest possible unit. - Only nest elements exclusive to that component; avoid nesting reusable elements. Transcript: Scott Tolinski Exactly. I think you can and you should think about nesting selectors as a component, meaning that when you are styling something, you are grabbing onto the smallest possible piece of that. So my example of a player earlier probably actually is not a good example because I guess the player itself will have some styles. But if you are using pieces of that player anywhere else on the website, then that should be its own component. So if you have a button that you are only using inside of the player, maybe that makes sense to style inside of it. But if you're like, I want this button style in the player, but we also want the button style on our forms, 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 on it, and I should be able to reuse it. So only nest things when you know that it is part of that component and will not ever be reused anywhere else on your application or your website. ([Time 0:07:10](https://share.snipd.com/snip/f64852fb-42df-40b6-af85-02db0605e519)) - **Ampersand Functionality** - The ampersand in CSS nesting represents the parent selector. - This allows for extending selectors, such as styling articles with a "wide" class using `& .wide`. Transcript: Scott Tolinski It works with every selector that you could possibly imagine nested inside of it. But the next thing we'll talk about is the ampersand inside of CSS nesting. So it's important to understand what the ampersand does. The ampersand stands for the parent selector. So whenever you see an ampersand, you say, okay, if that were to be expanded, that will be referencing whatever the parent selector would be. So that is helpful because you can say, all right, I want to style all articles. So you select article, open up your curly brackets, and you say with 80%. Then if you want to make a wide 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 100%. So anytime you see the ampersand, it's the parent. And likewise, that parent works ([Time 0:09:20](https://share.snipd.com/snip/9a627be9-e3d5-47f6-bf19-1b4645bc6af3)) - **Ampersand and Pseudo-Selectors** - Combine the ampersand with pseudo-selectors like `:has` for powerful styling logic. - Style elements based on their children, like articles with images or links with specific hrefs. Transcript: Wes Bos With so many of the pseudo selector types that we have used in the past. And I love you have an example in your Twitter thread about using it with the has, which man combining with this with the has 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. Like you could imagine in the past, we may have done that with like a class, you would have had to have a special class on here that maybe is being even done with your templating language. All right. And this particular one, it has an image. So therefore, I'm going to add a class here in my actual markup, but now we'll be able to say, all right, this parent thing, if 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, you know, a, and I don't mean has as the pseudo selector, a specific href, right? One of the things that we did in the syntax site is that we styled specific links that were timestamps to have a completely different style. So you're able to use a attribute selector to look for a specific string inside of a timestamp. Then you'll be able to say ampersand, the attribute selector, and then style those a specific way. ([Time 0:10:17](https://share.snipd.com/snip/1e291923-c7f8-4bf6-acbf-40600fc95b70)) - **Styling Timestamp Links** - Wes and Scott styled timestamp links differently on the Syntax.fm website using attribute selectors. - This approach keeps styling logic within CSS, simplifying templating. Transcript: Scott Tolinski Yeah, any link that has an href that star equals, I think it was pound T equals, and that's a timestamp link, then style those differently. And that's really cool because it takes the logic out of your templating language. If we had to do that in our template, that would have been like, if whatever.ref equals whatever, then add the class of timestamp link, which in some cases is okay. But if you can get away with taking that logic out of your templating and just putting it on a CSS rule, often that's a really good choice. ([Time 0:11:35](https://share.snipd.com/snip/86fe2129-26dd-422b-9b9c-960a037380f1)) - **Simplified Bare Selectors** - An ampersand before bare element selectors is no longer required. - Use PostCSS to transpile for older browsers and simply nest selectors as expected. Transcript: Scott Tolinski Yeah. So one of the earlier versions of the spec and actually the implementation in Safari and Chrome currently was that if you are nesting a, I call it a bear selector, if you're nesting a selector That does not start with a symbol, meaning like a dot for a class or a pound for an ID, then you had to previously put an ampersand in front of it. So you couldn't just say, all right, I'm selecting a button. And then inside of the button, any spans, I'm going to, like I do this in my 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. You would have to say ampersand button, because if you're selecting a bare element selector, there was no way for them to just nest the selector right inside of it. It was a, we had Adam Argel tell us about this. He said it was like a parsing limitation where the CSS parser had no idea when it hit it if this was a, 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 it. So the ampersand in front of an element is no longer necessary. It's already implemented in Firefox, and you're going to be using PostCSS to transpile these for older browsers anyways. So 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. But otherwise, you can just not learn this and just use it as you would expect it to work. ([Time 0:12:25](https://share.snipd.com/snip/1de77d06-5aa7-4307-82c9-ebb32770014d)) - **Unsupported Sass Feature** - Appending classes using the ampersand, a common Sass technique, is not supported in CSS nesting. - This affects BEM-style syntax users who concatenated strings for block, element, and modifier classes. Transcript: Wes Bos Here's something that does not work, that did work with SAS. You cannot essentially append a class to the end of something using the ampersand. So something that people used to do in SAS. And I must confess, this was never a technique that I personally enjoyed, but I did see this being used a lot where you'd have like in BEM style syntax, you might do a class of block and then Ampersand, and then your underscore, underscore element, and then ampersand hyphen hyphen modifier nested. So that way it would append the word element or the element's name to your block, or it would append the modifier to the element block, right? It would actually concatenate the strings for you in SAS, but you cannot do that in the css version of nesting which i gotta say because i did not use this technique 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 i ([Time 0:19:35](https://share.snipd.com/snip/7c19f2ad-a6b8-4be7-98a7-455ce9e15c63)) - **Media Query Nesting** - Nest media queries directly within selectors for improved organization. - Keep related styles together within a single component, enhancing maintainability. Transcript: Scott Tolinski And all of the logic as to how does it work is just in one selector. And to me, that's really nice to have it all in one component, in one space. And you can nest them as deep as you possibly want, which you probably shouldn't do. But you can put them at any level deep. Wes Bos Yeah. And it also works with container queries, which, gosh, man, I don't know if you've been using container queries much, but I have. And especially on the syntax site, it's like any time 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 you thought about it back in 2011 or something. It really nothing beats it container queries rule. And the fact that you can just nest inside of them makes it really nice and easy to feel like it is it's all contained inside of one little wrapper, one little thing. And it fits so well with the general thought process behind CSS nesting that it feels like two peas in a pod for a feature set for me. ([Time 0:21:46](https://share.snipd.com/snip/bc5b1481-2adf-41bf-9c6a-ee4aa214c155)) - **Naming Grid Areas** - Name grid areas for easier layout adjustments in container queries or media queries. - This allows for flexible layout changes without manually adjusting every grid element. Transcript: Wes Bos 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, grid columns, anything naming those grid columns i'm naming those grid rows and it is awesome especially because you can have kind of like groups of names For things so you can have like a start and an end and a content and a content and then i can say i want to go from start to end or i want to go from content to content and that will just fill up The content column or the aside column or whatever. Check it out. I actually did it in the layout class in the new syntax site, and it is chef's kiss. It's lovely. Scott Tolinski What's really nice about that is you can redefine your grid areas at a container or media query, and you don't have to rejig any of your layout. Correct. Because you simply said, go into the sidebar. And then if you change how big or where the sidebar is, it will simply snap to, you don't have to do it. I did another tweet tip a couple of days ago where I laid out the differences between a sync, defer, script tag, and module. And I built a little visualization with CSS Grid. And I said, like, all right, this is downloading, this is rendering, this is execution. And every time I wanted to change how big rendering was, I had to go all three of them and change the start and end. And I was like, damn it, I should have just named the grid areas. Then i can just change how big the grid area is and it will snap too i don't have to worry about all right stop at five and then the next one start at six yeah and it it tracks with how you think Wes Bos About content in a grid you don't think about this content goes in the second column and spans three columns so you think no this thing goes in the content area. This goes in the sidebar area, you know. ([Time 0:23:36](https://share.snipd.com/snip/7b139db1-5ba6-4a94-916b-83b29fdd88a2)) - **Transpilation for Compatibility** - Use CSS nesting with transpilation for cross-browser compatibility. - Unlike Sass, CSS nesting offers standardized features, live variables, and container query lookups. Transcript: Scott Tolinski So we quickly have talked about in the past, how do you make this work on all the browsers? So it is just syntax, meaning that 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 that you need to work in every single browser. Why? Because the browser literally has to implement it. Yeah, there's probably JavaScript polyfills and whatnot, but that's probably not worth it. So meaning that you are still writing regular CSS and it can be transpiled, compiled 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 SAS had been compiled, you can do this. And maybe that's another thing I want to talk about as well as people are saying like, well, why not just use SaaS? What's the benefit of this type of thing? There was a lot of people that were, I think I understand why people get angry because they're sort of exhausted that they just wrote their entire app in SaaS. And now there's this new thing. 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. But the benefit to this over SAS, and you can go back to episode 603, can vanilla CSS replace SAS yet? The benefit of that is you get live variables, you can do container query lookups, you get all of the scoping. This is standardized CSS, and all of the tools, all of the libraries, everything that you're going to use is standardized. So to me, that's the benefit of this type of thing. It's not that SAS is bad. It's that SAS is so good that we literally added it to ([Time 0:25:30](https://share.snipd.com/snip/df1d020e-8986-40f5-9e02-f135011fd4c3))