Getting started with CSS nesting

doesnt work

This is a long-waited feature in CSS for me and its finally here! I am really grateful that a good person like you is there to provide us with contents like this, you really are a blessing to the community.

Will container queries work in nesting

great

This will work great with Svelte 😮

Now we need mixins and masonry layouts 😅😅😅

Don't think I heard the term "placeholder" used often enough in this explanation, but that's all & is IMHO.

Thanks for this! This will be awesome when browser support gets there.
A little question, do you know if LESS and SASS will support classic css vs nested css for css outputs?

Why doesn't the browser use the :where selector when it converts combined selectors?

I really wish they didn't cave to pressure and make & optional. It's just unintuitive that it's a descendant selector without the ampersand, but you add it to get to same selector... you literally have to ADD the ampersand operator to REMOVE the descendant behavior... this is not normal.

The thing I find annoying in nesting is because you raise specificity, so when I need to make a media query I have to recreate the entire nesting even though I just want to change an li or something.

I'm assuming that it didn't really matter, but FTR, the primary-navigation__list element you created was an ID not a class attribute...

I’ve been using SCSS for a long time…this seems reeeeeeally similar.

Awesome video. Thanks!

Hii kevin! So I use Styled components and alot of I do have to get to 3layers of nesting, but that is mostly because I am using many many changing css for my projects.

Thank you Kevin. You are the reason I enjoy CSS.

thank god this will change everything for me

As always, very well explained, Kevin! Especially the gotchas regarding native vs. pre-processor nesting are important to know. Though there are two things that I am missing in this video. One is how you can support browsers that don't support nesting and the other is how the DOM model for nested rules works. (I know, this channel is mainly about CSS but I believe the DOM APIs are part of that and especially for nesting quite important.)

Note that the restrictions regarding the ampersand selector got relaxed in the latest version of the specification. That means, you do not need an ampersand in front of an element selector anymore. Firefox 117 already ships with this relaxation in the syntax, Chrome and WebKit still need to change that.

That's for the update sir

This was so overdue ;-) Since about 10 years I was waiting for css nesting to become native :-)

I may have commented this before, but I'm extremely grateful for your videos. CSS makes so much sense when you explain it. I stumbled into frontend work by accident, so I never took the time to formally learn CSS and have just been brute-forcing my way through stylesheets. But since I've been watching your videos, I'm starting to actually understand why some things work and others don't. It's a great feeling.

i dont think you should use this for at least 1 year until seriously everyone supports it.

until then, using scss and compiling it to css is the safer route

I really think Chrome dev tools should resolve the ampersand symbol to the value and just indicate it's a placeholder by coloring it differently.

@Kevin think you may need to add a correction, style wasn't applying to ul also because you put that bem style string in the id attribute value not class. makes a lot of sense to stick w sass nesting for me since im using that anyway and browser support is not an issue, but appreciate this info!

Why require that nested selectors start with a symbol though? It feels inconsistent and arbitrary.

I wont switch for now, I dont like the gotchas and id lose mixins. I also feel like seeing the & in the dev tools is just confusing, because you have to hover it first to figure out where it's from.

GoodJob!

This is awesome, can't wait to try it

Thanks a lot for a so nice lesson!

I believe PostCSS can translate nested CSS for browsers that don't support it

I personaly only use Scss and BEM when i know that a project get really big, to organise my code and to speed up the process off writing the code.

I think i will use not all of the fetures when they are out.
But some off them like the media query or for &:hover

Nice to hear about nesting in CSS, I think that '&' symbol is necessary because of minification/oneline css thing. like 'a {color:red;&small{color: green}}' in this case css know that &small is new element and not css property. (Its just my guessing :D) Nice video.

At last!. Thirty years later, we finally have the most obvious feature for this language.
I've been waiting for this moment all this time to have CSS nesting!

I owe you a huge thank you. I’ve been struggling to learn the absolute basics of html of almost a year now. I know pathetic. You are my favorite means of learning html. Unbelievable how much replay value your videos have. It’s your tone, voice, pace, kindness, attitude, it’s everything. I hope that everyone can achieve the level of teaching you have in whatever they desire, by applying what you did, time and effort

Seems like it has a very specific use case. I don't really use BEM personally due to modules, but sometimes for semantics sake I implement some kebab case in my modules and SASS is great because of it.

pretty sad firefox has to play a bit of catch up, but i love we're finally getting far more robust features for CSS. I hope some day we can use loops like we do in js in some way, shape or form.
I do have to say, you did, as usual, a phenomenal job covering the good the bad and the ugly kevin! One of my fav tech content creators of all time <3. Bell icon has never felt this good!

There have been lately some new standards I have trouble understanding the reasoning behind... Could someone explain the idea why the a { .smth } is OK, but a { li } is not?

Hi Kevin,
What is the program that you use to record your videos?

Ha hoisting in css 😂

Hi Kevin, Im currently studying web developent and sometimes get discouraged by the advancement in AI and the possibility of replacing devs and I was wondering what your thoughts are. Is it likely that devs will be replaced or they will adapt to the new changes AI brings?

In your code "primary-navigation__list" is an id, its not a class!

Literally just yesterday I was pondering how feasible it would be to add sass to a pretty old legacy site but definitely was a little hung up on introducing all the extra complexity to build it.

So excited that css nesting will be a truly viable option in the future as nesting was one of the primary reasons I wanted sass.

Nesting is basically 99% of what I use less for.
Is there a css->css converter so that we can use this now?
I think I'll take the approach of always using `&`. Sometimes omitting it is just going to lead to bugs...

I can see the creators of sass stressing a lot

This shows that CSS is getting more like a programming language, and along with that, you need to follow good styling patterns: limit the nesting, property naming, etc… I see linters with these styling rules becoming popular very soon and naming conventions like BEM going away. This also will increase the learning curve at a faster rate.

Have a beer. I get all my css news from you. Super useful video. Always found scss a bit dangerous and extra faff. I like to put things that could cause confusion next to each other on the stylesheet. Putting some of a block's rules in the css file and some in scss file is just asking for human error. Looking forward to using nesting.