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'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.
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.
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
@@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.
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 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 !
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.
@@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.
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.
@@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.
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 ❤️✨
Thanks for this, Kevin. You are literally the only TH-camr 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.
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.
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.
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.)
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!
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
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 think it actually can help quite a bit when you have various declarations that goes alongside a main class declaration. You don't have to look through a list of multiple .class { } rules, but can find and reference the .class { } rule set that contains all the various specific rules you may want for different parts of the class being used in the styling. If I have a @media query that is specific to an element behavior, I can nest it into the .class instead of nesting the class into the @media-query below my .class rules. I really like the ability to organize things like this. I won't always nest things into a main class, as I tend to write CSS in order of appearance in the HTML so I can more quickly locate what specific thing I want and scroll up and down in the CSS, but when I have .class { general rules for this part of the HTML } .class textarea { specific rules for this specific textarea} .class label { specific rules to create a custom tooltip out of the label tag } and so on in example all one after the other, it is nice to be able to nest the rules into the general rule declaration.
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.
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.
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..
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.
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.
@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!
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.
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.
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 {} 😆
ปีที่แล้ว
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?
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?
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?
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
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.
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😞
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.
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.
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.
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.
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.
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.
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
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
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 🤷🏼♂️
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.
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?
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
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...
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.
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? :/
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.
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...
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 :)
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.
@@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.
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
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.
Man...i am confused... The & means descendant selector in case of html tags, but combinations in case of class or pseudo selectors? Did I catch that right? If so... That's some confusing BS... Sass is much more thought through... Hope I misunderstood that part
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'm not sure how that helps if you learn the basics of selectors ... for the first glance (no time to watch whole video, maybe you could make Kevin 3-5 minutes summary in the end?) , anyway doesn't CSS have bigger issues they should work on?
People don't watch recaps at the end of videos, so I stopped bothering a long time ago 😅. What are the bigger issues they should be tackling? They are working on a lot of stuff, but it's in a pretty good place now, overall, I find :D
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.
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'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.
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.
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.
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
@@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.
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 !
I tried this feature but native css cannot handle this type of nesting:
.btn, button {
&:hover, &:selected {
...
}
}
Yep, Sass even had to change @import because it's a native CSS feature
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 !
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.
@@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.
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.
@@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.
Yeah I'm as well
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 ❤️✨
Thanks for this, Kevin. You are literally the only TH-camr 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.
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.
8:30 agreed. Just always use the nesting & as a rule, for consistency and clarity too
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.
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.)
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!
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
The nested media query @ 18:25 is pure gold. thanks Kevin!
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 think it actually can help quite a bit when you have various declarations that goes alongside a main class declaration. You don't have to look through a list of multiple .class { } rules, but can find and reference the .class { } rule set that contains all the various specific rules you may want for different parts of the class being used in the styling. If I have a @media query that is specific to an element behavior, I can nest it into the .class instead of nesting the class into the @media-query below my .class rules. I really like the ability to organize things like this. I won't always nest things into a main class, as I tend to write CSS in order of appearance in the HTML so I can more quickly locate what specific thing I want and scroll up and down in the CSS, but when I have .class { general rules for this part of the HTML } .class textarea { specific rules for this specific textarea} .class label { specific rules to create a custom tooltip out of the label tag } and so on in example all one after the other, it is nice to be able to nest the rules into the general rule declaration.
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.
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.
Good video. Just a note : the latest versions of browsers allow nesting of element selectors without starting with &
This was so overdue ;-) Since about 10 years I was waiting for css nesting to become native :-)
Thank you Kevin. You are the reason I enjoy CSS.
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..
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.
I was thinking about this while brushing my teeth last night then boom, you make a video. Thanks boss.
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.
@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!
Great video as usual. Wouldn't recommend using it unless safari
oh my god this cannot be perfect I was literaly opeing YT to learn sass for it's nesting
thank god this will change everything for me
Love this! Thanks Kevin on updating us!! love ya
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.
Thanks so much!
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.
Nesting is the best thing. Makes things fast to create, easy to ready, etc
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 {} 😆
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?
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
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?
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?
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
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.
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😞
That’s wild! Just Syntactic sugar, sure, but for some people it might be easier do understand.
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.
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.
This is awesome, can't wait to try it
Hi Kevin,
What is the program that you use to record your videos?
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.
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.
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.
Remember that you can use source maps to see the scss while debugging your styles
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.
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
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
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.
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
@@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
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 🤷🏼♂️
Thank you! Do you plan to record lessons about TailwindCSS?
No plans to, no.
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.
Why doesn't the browser use the :where selector when it converts combined selectors?
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...
Don't think I heard the term "placeholder" used often enough in this explanation, but that's all & is IMHO.
I would imagine pre-processors will offer an option to output nested CSS eventually... sooner rather than later.
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?
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
Kevin, you mixing ui id attribute with class selector in your "primary-navigation__list" explanation
Thanks a lot for a so nice lesson!
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 love nesting and thats why I prefered sass. Much easier to understand while its less code.
it will be great help in
input tag
button tag
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.
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? :/
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.
That works perfectly fine, no issue at all. You just need to make sure your not treating it like a string.
You sure can :)
lol, fall deeply in love with css >
oooooh yeaaaah
I believe PostCSS can translate nested CSS for browsers that don't support it
Awesome video. Thanks!
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?
Will container queries work in nesting
This will work great with Svelte 😮
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.
That's for the update sir
This is great! Thanks!
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...
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 :)
I don't like the idea if having to use the ampersand at all. Why can't they make it to work without it, just like in SCSS?
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
19:48 Are you sure this is the old way?
But 'primary-navigation__list' is an ID, not a class, right?
25:12 Try VS Code setting - Editor > Sticky Scroll: Enabled.
I still love sass because of indent style of it. Code look more short and clean
What happens on older browser versions?
Vanilla things are also starting to evolve with the library's functionality. Does this mean that existing(old) libraries will be useless?
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.
@@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.
Why require that nested selectors start with a symbol though? It feels inconsistent and arbitrary.
Thank you for your awesome videos
I learnt a lots ,
Thanks sir. I really wish if I can get the opportunity to talk you sir.
I have not learned JS yet, but how much can we even do with JS that modern CSS can't do on its own?
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
@@KevinPowell Yeah I have a lot to learn haha.
thank you sir!😊
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.
Man...i am confused... The & means descendant selector in case of html tags, but combinations in case of class or pseudo selectors? Did I catch that right? If so... That's some confusing BS... Sass is much more thought through... Hope I misunderstood that part
I believe the difference is the space. &.button is different from & .button
Yeah, like Keenan said, it's about the space, the same way .button.accent is different from .button .accent :)
@@keenanflogerzi5218thanks man!
Is it a one or the other situation when it comes to SASS or can I write nested CSS in my SCSS files somehow?
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'm not sure how that helps if you learn the basics of selectors ... for the first glance (no time to watch whole video, maybe you could make Kevin 3-5 minutes summary in the end?) , anyway doesn't CSS have bigger issues they should work on?
People don't watch recaps at the end of videos, so I stopped bothering a long time ago 😅.
What are the bigger issues they should be tackling? They are working on a lot of stuff, but it's in a pretty good place now, overall, I find :D
Thank god it doesn't allow partial class/id names (9:00), that always made discoverability really challenging imo.
I’ve been using SCSS for a long time…this seems reeeeeeally similar.
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.