Getting started with CSS nesting

Подписаться 913 тыс.

Просмотров 66 тыс.

50% 1

Nesting has landed in native CSS, and with Firefox gaining support for it, it is now supported in all the major browsers!
So let’s take a look at what nesting is, some of the gotcha’s with it, a little bit of how it differs from Sass nesting, and more.
🔗 Links
✅ Browser support: caniuse.com/
✅ The official spec: www.w3.org/TR/css-nesting-1/
✅ More info on it from Chrome Developers blog: developer.chrome.com/articles...
⌚ Timestamps
00:00 - Introduction
01:20 - What is Nesting?
01:50 - Descendant selectors and nesting multiple levels deep
03:53 - The ampersand / nesting selector
06:02 - When do we need to use &?
09:00 - What we can’t use & for
11:20 - Creating compound selectors
13:34 - using & for hover and focus
15:13 - using & with not
16:15 - Using the & after another selector
18:07 - Nested media queries
19:38 - Nesting can change the order of your declarations
21:20 - Specificity with nesting
23:00 - Readability and searchability of your code base
25:22 - Browser support
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 171

@benjaminmosnier 10 месяцев назад

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

@Wolfeur 10 месяцев назад

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.

@inariiii 10 месяцев назад

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 ❤️✨

@JhoziKay 7 месяцев назад

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.

@TheNeonRaven 10 месяцев назад

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 10 месяцев назад

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.

@filippotinnirello 10 месяцев назад

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

@mahadevovnl 10 месяцев назад

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.

@dharma391 10 месяцев назад

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

@amyIsFlexable 10 месяцев назад

Thanks for this, Kevin. You are literally the only RU-vidr 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.

@z3rocodes 10 месяцев назад

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.

@octopus_spirit 10 месяцев назад

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

@Cipscis 10 месяцев назад

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.

@CZghost 10 месяцев назад

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!

@Gbtx6 10 месяцев назад

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

@one_smol_duck 10 месяцев назад

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.

@brianpratt6087 10 месяцев назад

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.

@SebastianZartner 10 месяцев назад

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

@jamesrosemary2932 10 месяцев назад

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!

@Lucsy3012 10 месяцев назад

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

@baka_baca 10 месяцев назад

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.

@shafnisha1171 10 месяцев назад

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

@paulporter8363 10 месяцев назад

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

@SebastianZartner 10 месяцев назад

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.

@EdgyVidyaGeneral 10 месяцев назад

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

@MRMOTOFOTO 10 месяцев назад

This is awesome, can't wait to try it

@zakir.nuriiev 10 месяцев назад

Thanks a lot for a so nice lesson!

@niner8275 10 месяцев назад

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

@Pouckimon 10 месяцев назад

Awesome video. Thanks!

@modernkennnern 10 месяцев назад

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

@AndreGreeff 10 месяцев назад

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

@nednosleep 10 месяцев назад

thank god this will change everything for me

@gerogep3666 5 месяцев назад

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.

@dimensionalpotential 10 месяцев назад

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

@richardhindle1663 10 месяцев назад

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!

@nro337 10 месяцев назад

This is great! Thanks!

@filippotinnirello 10 месяцев назад

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

@fvgoya 10 месяцев назад

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

10 месяцев назад

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?

@initiallytk 10 месяцев назад

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😞

@stefan5673 10 месяцев назад

Thank you for your awesome videos

@mukeshodhano4094 10 месяцев назад

it will be great help in input tag button tag

@Yogesh-kr7bo 10 месяцев назад

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

@NoiseLeGGa 10 месяцев назад

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.

@thought-provoker 10 месяцев назад

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 {} 😆

@penguinxed 10 месяцев назад

thank you sir!😊

10 месяцев назад

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.

@Linuxdirk 10 месяцев назад

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

@DR-nn3ns 10 месяцев назад

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

@ffpg2003 10 месяцев назад

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

@brain5853 10 месяцев назад

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.

@favouritejome 10 месяцев назад

That's for the update sir

@domanickharper 10 месяцев назад

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?

@limpzbizkit1022 10 месяцев назад

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.

@lakshaychauhan9190 10 месяцев назад

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.

@bronzekoala9141 10 месяцев назад

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.

@knoraziel 9 месяцев назад

This will work great with Svelte 😮

@mimosveta 10 месяцев назад

lol, fall deeply in love with css >

@DrWoofOfficial 10 месяцев назад

oooooh yeaaaah

@jonathanmarois9009 10 месяцев назад

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

@yossiaharoni1 10 месяцев назад

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

@jored56 10 месяцев назад

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

@silverfullbuster9177 10 месяцев назад

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?

@VideoNOLA 9 месяцев назад

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

@stevelam1315 10 месяцев назад

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

@DannyH77 8 месяцев назад

Will container queries work in nesting

@AlexisSilent 10 месяцев назад

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

@adamjohnantonio 10 месяцев назад

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.

@elephant313 10 месяцев назад

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

@albinmiftari1832 10 месяцев назад

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

@daveturnbull7221 10 месяцев назад

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

@TomSaw_de 10 месяцев назад

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?

@Ostap1974 10 месяцев назад

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?

@aurusaurum9649 10 месяцев назад

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

@KevinPowell 10 месяцев назад

No plans to, no.

@kevinfisher7032 10 месяцев назад

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

@jfftck 10 месяцев назад

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.

@grymmjack 10 месяцев назад

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.

@spicybaguette7706 10 месяцев назад

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

@sandy_knight 10 месяцев назад

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

@LouisCharlesBlais 10 месяцев назад

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 🤷🏼‍♂️

@ongke3655 10 месяцев назад

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

@soymuymuy 10 месяцев назад

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

@beautiful-css 9 месяцев назад

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

@LeeSmith-cf1vo 10 месяцев назад

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

@janjgaval 9 месяцев назад

great

@ExtoNov 10 месяцев назад

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.

@kh_trendy 10 месяцев назад

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.

@ArielZab 10 месяцев назад

What happens on older browser versions?

@qm3ster 10 месяцев назад

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? :/

@almannazyrov394 10 месяцев назад

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

@miraclemichealm1366 10 месяцев назад

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

@chesterxp508 10 месяцев назад

GoodJob!

@johnconnor9787 10 месяцев назад

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

@dejansljivak66 10 месяцев назад

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

@KevinPowell 10 месяцев назад

No way to do that one

@ModifiedMusicYT 10 месяцев назад

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

@drviagrin3798 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

@clevermissfox 2 месяца назад

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…

@Cahnisama 10 месяцев назад

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.

@thedelanyo 9 месяцев назад

Now we need mixins and masonry layouts 😅😅😅

@eddielhs 10 месяцев назад

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

@KhaldoonMasud 10 месяцев назад

Will SASS/LESS obsolete?

@reaper84 10 месяцев назад

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