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 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.
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.
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.
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 ❤️✨
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.
Thanks for this, Kevin. You are literally the only RUclipsr 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.
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.
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'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.
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.
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!
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
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.)
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.
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.
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.
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.
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.
@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!
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.
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
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 {} 😆
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
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.
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.
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.
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 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😞
Год назад
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.
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.
SCSS is so much more than nesting, I cant see vanilla CSS replacing preprocessors. Also I have never liked how CSS variables are declared and used, much more complicated than SCSS.
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?
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.
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?
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.
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.
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.
What do you guys think ? Is browser support good enough for using native nesting in production? I recently had someone on an icodethis challenge using chrome 110 and couldn’t see my submission. That made me nervous that a coder wasn’t updated , where are civilian users on the browser update levels ?! How many supported browser versions do you need to feel comfortable using in production? I thought a dozen supported versions would be fine for chrome but…
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...
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? :/
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?
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.
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
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 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.
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 🤷🏼♂️
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
![Tee Grizzley - Detroit (Feat. 42 Dugg) [Official Video]](http://i.ytimg.com/vi/aeKfTtt0x14/mqdefault.jpg)
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 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
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.
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.
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 ❤️✨
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 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.
Thanks for this, Kevin. You are literally the only RUclipsr 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.
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.
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'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.
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.
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!
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
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.)
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.
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.
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.
The nested media query @ 18:25 is pure gold. thanks Kevin!
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.
This was so overdue ;-) Since about 10 years I was waiting for css nesting to become native :-)
thank god this will change everything for me
Thank you Kevin. You are the reason I enjoy CSS.
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
Love this! Thanks Kevin on updating us!! love ya
I was thinking about this while brushing my teeth last night then boom, you make a video. Thanks boss.
Don't think I heard the term "placeholder" used often enough in this explanation, but that's all & is IMHO.
Nesting is the best thing. Makes things fast to create, easy to ready, etc
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.
oh my god this cannot be perfect I was literaly opeing YT to learn sass for it's nesting
I would imagine pre-processors will offer an option to output nested CSS eventually... sooner rather than later.
Great video as usual. Wouldn't recommend using it unless safari
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.
That’s wild! Just Syntactic sugar, sure, but for some people it might be easier do understand.
lol, fall deeply in love with css >
oooooh yeaaaah
This is awesome, can't wait to try it
@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 doesn't the browser use the :where selector when it converts combined selectors?
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.
That's for the update sir
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
25:12 Try VS Code setting - Editor > Sticky Scroll: Enabled.
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 {} 😆
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
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!
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.
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.
it will be great help in
input tag
button tag
Thank god it doesn't allow partial class/id names (9:00), that always made discoverability really challenging imo.
I love nesting and thats why I prefered sass. Much easier to understand while its less code.
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 believe PostCSS can translate nested CSS for browsers that don't support it
This will work great with Svelte 😮
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?
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😞
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.
Kevin, you mixing ui id attribute with class selector in your "primary-navigation__list" explanation
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
Awesome video. Thanks!
Will container queries work in nesting
Wow bro. Thanks for these. Seriously 🫡
Thanks a lot for a so nice lesson!
This is great! Thanks!
SCSS is so much more than nesting, I cant see vanilla CSS replacing preprocessors. Also I have never liked how CSS variables are declared and used, much more complicated than SCSS.
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?
I still love sass because of indent style of it. Code look more short and clean
19:48 Are you sure this is the old way?
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...
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.
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
Now we need mixins and masonry layouts 😅😅😅
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?
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.
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.
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.
Hi Kevin,
What is the program that you use to record your videos?
What do you guys think ? Is browser support good enough for using native nesting in production? I recently had someone on an icodethis challenge using chrome 110 and couldn’t see my submission. That made me nervous that a coder wasn’t updated , where are civilian users on the browser update levels ?! How many supported browser versions do you need to feel comfortable using in production? I thought a dozen supported versions would be fine for chrome but…
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...
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? :/
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?
Why require that nested selectors start with a symbol though? It feels inconsistent and arbitrary.
Sad that nesting won't work like pre-processors 😔
I learnt a lots ,
Thanks sir. I really wish if I can get the opportunity to talk you sir.
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.
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
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
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
Thank you for your awesome videos
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.
But 'primary-navigation__list' is an ID, not a class, right?
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 🤷🏼♂️
What happens on older browser versions?
I really need that. CSS is starting to look like macros in Rust
Thank you! Do you plan to record lessons about TailwindCSS?
No plans to, no.
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 you sir!😊