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.

I personally find nesting when it’s done in moderation a lot easier to read the non-nested css. It’s easier to glance “component” boundaries, etc.

@saoirsethewanderer

10 ай бұрын

Completely agree. I love nesting. I can create a component called Wayfinder and then nest all styles for that wayfinder under it so that I don't have to apply a bunch of class names to my code. To me, the whole concept of tailwind, and other class-based systems, isn't a good use of CSS and adds bloat to the HTML/code page. CSS is supposed to take care of the styling and the code is for code.

@mityaboy4639

10 ай бұрын

and the nested groups are in a way cool, because now you can close large sections in the IDE, so “scrolling through” is less of an issue. if you pick your nesting properly, the scroll through could be like scrolling through a class with all closed up functions and you find what you want much faster

@saoirsethewanderer

10 ай бұрын

@@mityaboy4639 completely agree. I love nesting. Makes writing complex systems easier and makes specificity easy to see and understand. It also works great when using a system on top of the code. Something like material or bootstrap are easy to modify with nesting. No need for !important in your css.

@SquareballoonCoUk

9 ай бұрын

I often end up writing MORE CSS doing it this way because I'm adding selectors to absolutely everything, but it's way more maintainable, easier to read and better for teamworking.

I love how native CSS is gaining more and more ground on Sass. I'm definitely trying this new feature, thanks Kevin !

10 ай бұрын

I tried this feature but native css cannot handle this type of nesting: .btn, button { &:hover, &:selected { ... } }

@TravisHi_YT

10 ай бұрын

Yep, Sass even had to change @import because it's a native CSS feature

@myfreedom42

2 ай бұрын

SASS will be always better ;)

I can’t wait to ditch Sass in my projects. Nowadays I use it only for nesting (for media queries this is awesome) but this indue a lot of config and rules in IDE. THIS is a really huge for me !

@KevinPowell

10 ай бұрын

I think a lot of people are in the saem boat as you, but there are a few key differences, namely not being able to do `&__item` or whatever to have it create a class name based on the parent.

@ModifiedMusicYT

10 ай бұрын

​@@KevinPowell @import "../../style.scss"; @import "./mixins_.scss"; .LeftBar__ { @include themify($themes) { @include LeftBar__; &container { display: flex; flex-direction: column; width: 100%; padding: 8px; in this example of SCSS i have in my project &container is creating the class Leftbar__container.

@saoirsethewanderer

10 ай бұрын

I use it because the frameworks we use also use it. I can adjust the variables for that framework using SCSS as well as things like nesting and media queries. Mixins are great too.

@wafflecodes

10 ай бұрын

@@KevinPowellI agree here. I mean, I’m sure I can adjust just fine, but the power of being able to create the classes to automatically combine with the parent is amazing for BEM at least.

@ahmedkhabar

10 ай бұрын

Yeah I'm as well

I've never liked the "hyperclassification" of tags in CSS. It's really bloaty, and I always found that your HTML structure should generally work by itself and that classes should only be used when you can't distinguish between things with normal selectors. If I have a navigation menu, I don't need to classify my and my inside the ; the latter just has a class/id and the rest is just coherent based on this. That did lead me however to rely on descendent selectors a lot, and in that regard native nesting is really a god-sent! Now give me mixins so I can completely ditch any remnant of styling semantics in my HTML and I'm good.

the "more painful old way of writing it" you used is still the nesting 😭😂, the actual more painful of way of writing it includes declaring the media query then calling the selector inside of the media query then giving it the styles, thank you very much for this video ❤️✨

My first impression is that I'll stick with SASS for now :) I only really use it for nesting, and I think it is superior and more transparent. But I'll definitely dive into this.

Thanks for this, Kevin. You are literally the only KZreadr whose videos I watch with note-taking materials handy. A random thing I learned from this video is that the people who like BEM sometimes do it because they're trying to keep the specificity down. I don't believe I've ever heard that as a reason before.

8:30 agreed. Just always use the nesting & as a rule, for consistency and clarity too

I'm taking your CSS Demystified course, really awesome so far. It's helped to tighten up my CSS skills and increase my confidence. I hope you continue making more courses, I would gladly buy them after seeing the quality of CSS Demystified.

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.

Great overview, thanks Kevin. I really appreciate the gotchas you called out, like with how it uses :is behind the scenes and that can affect specificity in unexpected ways. I also hadn't realised nesting @-rules was coming with nesting, but I think it's immediately become my favourite thing about this new feature as well.

The nested media query @ 18:25 is pure gold. thanks Kevin!

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

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.)

You completely read my mind with this one! I was messing around with postcss-preset-env and nested selectors with BEM classes and ran into the & selector difference from sass. It would be nice to have that functionality somehow in base CSS, but it makes sense from w3c's point of view to not complicate the & selector with new functionality.

This is gamechanging! Until today, you had to use SCSS or similar CSS preprocessors for nesting. But today? It's natively supported. That's incredible!

Love this! Thanks Kevin on updating us!! love ya

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!

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.

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?

Awesome video. Thanks!

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

Superb overview, thanks for the video! In general I'm looking really forward to this, but some of the gotchas weren't known to me so I would have definitely run into them

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

I was thinking about this while brushing my teeth last night then boom, you make a video. Thanks boss.

This is awesome, can't wait to try it

Nesting is the best thing. Makes things fast to create, easy to ready, etc

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.

thank god this will change everything for me

Thanks a lot for a so nice lesson!

I've always used the & in SCSS (Whenever I'm forced to use SCSS...). It makes the intention a lot clearer, especially in context of pseudos

This is great! Thanks!

Sass is so big, extensive and powerful by now, so I realized that unless I really need to build extensive, complex design systems, it's often not even necessary anymore. After the grid and layer now nesting.

Thank you for your awesome videos

oh my god this cannot be perfect I was literaly opeing YT to learn sass for it's nesting

This is awesome. I can visually see what's going on. That said, my complaint is that CSS has become super complex, and the complexity increases every year. It's overwhelming to learn and keep up. I often give up on a project just because it is taking too long.

thank you sir!😊

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.

@KevinPowell

10 ай бұрын

Thanks so much!

Great video as usual. Wouldn't recommend using it unless safari

Will container queries work in nesting

lol, fall deeply in love with css >

@DrWoofOfficial

10 ай бұрын

oooooh yeaaaah

@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!

that's aweosme.you could css stuff in order specifically for elements rather than one big list. You could Style a table and then style the specific elemts within the table and then close it and only open it when you wanted to edit that, right? Organization or Complication, what do you think?

it will be great help in input tag button tag

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

What is faster? To use SASS that compiles a complete finished CSS file or native features, that have to resolve this nesting before using this rules? And is this important or is the difference so marginal that this doesn't matter? The biggest problem imho is that you can't concat strings like you mentioned for BEM. I'm really excited to have this in native CSS and maybe they also add support for string concatenation in the future

It's great that css itself becomes more mature - I'll still stick to scss, since I have no reason not to (angular dev) and there are still more features in it than nesting that I use very often.

wait, is it new to css? im just learning sass today and as a beginner, getting the code longer and longer is getting kinda hard to read. sass cover it up for me. also I'm looking forward on your future tutorials regarding sass :) I learn a lot from you.

Will help me quite a bit make my CSS more structured. Hmm, have to wait until it has more support, but I'm definitely looking forward to it. Agree on the dangers multilevel nesting - but 2-level nesting is definitely gonna be better than .info-panel {} .info-panel a {} .info-panel a:hover {} .info-panel h2 {} 😆

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?

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

ah, that's beautiful... (: at about 17:42, I suddenly realised this is the final answer to all those requests for "parent selectors". lol. must admit, I would probably stick with SCSS, just because.. well.. it's CSS, with extras..

Can you use the & after an element selector? Like "div &". I assume we can't, right, based on the rule you said earlier in the video? Thanks for this video! Very informative.

@TheNeonRaven

10 ай бұрын

That works perfectly fine, no issue at all. You just need to make sure your not treating it like a string.

@KevinPowell

10 ай бұрын

You sure can :)

I really hope margin-trim gets widespread support! I'm getting real tired of turning off styles using stuff like :last-child like you did at @16:00. Obviously it wouldn't have worked in this case with a border, but... margin-trim looks SO much cleaner than what I normally have to do with margins. Sadly it's too early to get excited about just yet😞

This will work great with Svelte 😮

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.

That's for the update sir

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

Love u kevin waiting for this for too long.. I have a question should i keep on sass or use this instead and ditch sass.

@KevinPowell

10 ай бұрын

well, proper support for this is a ways off still, and we don't have mixins, custom functions, and a lot of other Sass stuff either

@elephant313

10 ай бұрын

@@KevinPowell thank u so much apprecaite ur reply. I was thinkning about it tho i think for now i will stick. With sass and css nesting

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.

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.

I would imagine pre-processors will offer an option to output nested CSS eventually... sooner rather than later.

That’s wild! Just Syntactic sugar, sure, but for some people it might be easier do understand.

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?

Kevin, you mixing ui id attribute with class selector in your "primary-navigation__list" explanation

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...

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.

I like the concepts behind nesting but to be honest my css is pretty simple so doubtfull I'll be using it in the near future. As for the possible gotchas with specificity and ids, that wont really affect me. I only use ids for javascript and even then fairly rarely. A really nice explanation of it all though Kevin

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

I love nesting and thats why I prefered sass. Much easier to understand while its less code.

9:45 Hey it wasn't showing up in dev tools maybe because in your CSS it's a class and not an id (#) ? element has id, not class. I don't mean the __list thing, just the devtools thing? Also thanks for these videos Kevin.

Thank you! Do you plan to record lessons about TailwindCSS?

@KevinPowell

10 ай бұрын

No plans to, no.

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.

Is it a one or the other situation when it comes to SASS or can I write nested CSS in my SCSS files somehow?

@KevinPowell

10 ай бұрын

You can either use .css files, which will just use native CSS nesting (and @use those files), or wait until support for :is() reaches more than 98%, and then Sass nesting will mostly be the same as native nesting. I have a video with more details on this coming out on Thursday :)

I still love sass because of indent style of it. Code look more short and clean

Are you aware of scripts that would convert the css file to non-nested css if the browser is not compatible? This could be nice considering its so different it will brake completly the project if the user doesn’t support it. Maybe a little backup solution could be intergrated on our projects 🤷🏼‍♂️

Not to say that you *should*, but if you do nest deeply then you can use VS Code's "breadcrumb" of all the parent selectors, much like all nested elements in HTML. You can also collapse a rule at any nesting point to clear some space.

I’m glad you mentioned readability. I used Sass on a couple of projects but found that it just wasn’t worth the trouble. After the initial development I would always be interacting with the compiled CSS so why bother? This seems like a nice integration of one of the most useful features.

@Starwort

10 ай бұрын

Remember that you can use source maps to see the scss while debugging your styles

23:00 putting a :where(...) around .hero ,#introduction would release the specifity so the the blue color in h1.page-title re-enters the scene, no?

25:12 Try VS Code setting - Editor > Sticky Scroll: Enabled.

What happens on older browser versions?

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

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...

great

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

@ChrisMochinskiMusic

9 ай бұрын

EDIT - I’ve now realized the big difference that actually might make the jump tricky for SCSS vets. The amp, in SCSS, is for combined classes & extra specificity. The amp, in nested CSS, apparently is to designate child elements. That’s a bit of a switcheroo.

Thank god it doesn't allow partial class/id names (9:00), that always made discoverability really challenging imo.

CSS taking in nesting is a huge imo, but since it still does not have support for functions, mixins, maps, etc, I'll stick with SCSS for now

Vanilla things are also starting to evolve with the library's functionality. Does this mean that existing(old) libraries will be useless?

@KevinPowell

10 ай бұрын

I dont think so, no. For now, there is browser support issues, and even in the future, Sass nesting wont be exactly the same as CSS nesting, plus there are other features that arent on the CSS roadmap at all.

@ExtoNov

10 ай бұрын

@@KevinPowell Agree.For example, people keep saying jQuery is outdated or kind of useless. But there are so many web sites that uses until now! Even in korea (where i born and raised) there are many companies that recruiting who can use jQuery. Of course, more and more companies are demanding React or Angular JS.

Now we need mixins and masonry layouts 😅😅😅

I learnt a lots , Thanks sir. I really wish if I can get the opportunity to talk you sir.

How to use @at-root #{selector} from Sass in native css?

@KevinPowell

10 ай бұрын

No way to do that one

19:48 Are you sure this is the old way?

Kevin, please answer as a pro CSS developer. What is the point for SCSS and using it while CSS is potentially evolving to like SCSS, I am shocked that CSS has nesting...

@KevinPowell

10 ай бұрын

There are still a lot of things you can do in SCSS that you cannot do in CSS, like mixins, loops, custom functions, and more, and most of those arent on the roadmap to being in CSS :)

Useful (and safe) feature, but shocked at what could happen when combining selectors like `.class,#id{a:a}`. This is horribly dangerous, it should have just been syntax sugar for separate selectors like `.class{a:a} #id{a:a}`. What were they thinking? :/

But 'primary-navigation__list' is an ID, not a class, right?

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.

Will SASS/LESS obsolete?

I have not learned JS yet, but how much can we even do with JS that modern CSS can't do on its own?

@KevinPowell

5 ай бұрын

CSS has come a long way, but it can't do everything, nor is it meant to. JS is for user interaction, for the most part. Listening for button clicks, tracking the mouse position, etc, and then making changes to the site based on them, like injecting html, toggling classes to change the styling, etc. that's for the simple stuff anyway

@drviagrin3798

5 ай бұрын

@@KevinPowell Yeah I have a lot to learn haha.

GoodJob!