How To Use Nesting In Plain CSS
Vložit
- čas přidán 13. 06. 2024
- I cannot believe it is finally happening. CSS is getting native support for nesting and it is everything I ever could have asked for. In this video I explain how you can start using nesting today as well as all the edge cases you need to be aware of if you start using nesting yourself.
📚 Materials/References:
CSS Specificity Video: • Learn CSS Specificity ...
CSS Specificity Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:24 - Setup
01:30 - Nesting Basics
03:52 - Nested Media Queries
04:53 - Nesting Specificity
08:10 - @nest Keyword
09:54 - Nesting Ordering Gotcha
#CSS #WDS #CSSNesting
Why is the official css syntax always more complicated than the scss equivalent when they have scss as an example on how to do it lol
Because they're morons that never actually wrote css. Same for js spec ones. Typically "hotshot" super engineers that don't care for the language and have wierd nonsense biases from whatever it is they like as a hobby.
propably because it takes years to create a global web standard, then it takes months to years before browsers support it.
However imho there is no excuse for not having nesting in the standard.
I’m not saying adoption of features, I mean the actual syntax. Why have the ‘&’ before nested selectors for example.
you need the & because if not it might be ambiguous, like if you write color:hover the parser will see that you are setting the color property
@@jiraibozo But the & isn't a browser parser issue in this context, it's a spec issue. This awkward syntax is being written into the spec, despite this problem having already been solved by SCSS's nesting syntax. The native CSS nesting syntax just feels clunky in contrast, and frankly just seems different for the sake of being different.
You got me in the first half!
This is so convoluted, never gonna ditch SCSS
Thanks for the update! This is the first time I have heard of this upcoming thing that the browser will finally support in the future.
Great video! Nice and in depth as always!
Awesome channel, I've learned loads. 👍🏿"Cutting edge" you say... I can't wait for your video on the updated 'Select' element (currently in experimental development).
Where do you find news about stuff like this?
That was completely new for me!
I'll try it!
A BIG thanks from me 💜
Finally, i been waiting on this.
I guess I will stay with SCSS even when this feature gets rolled out 😉
Why not simply use SCSS instead of CSS...
@@nothingisreal6345 Because in large projects transpiling/compiling with sass can take a very long time. If you go pure css, you won’t need the transpilation step. Only minification for production shipping would be required. This is great because it speeds up the dev process significantly.
@@timoernst To be fair in large projects you probably would be using a componen based design system with its own scoped styles tho. So the use of SCSS (In regards to this particular feature!) Is kinda irrelevant
In my personal experience, compilation and minification has always been really fast even in larger projects and because of that I haven't written pure CSS for years now. I've recently come to like Tailwind (after I wasn't a big fan of that approach before) so I think I will use that for the next larger projects, I guess.
@@pxlbltz Tailwind is a godsend in production. It might no be pretty, but it gets things done extremely fast. While also playing very well with design tools like Figma. Very nonstandard approach, but boy does it work marvelously in practice, specially with something like NextJS
Really good. Thanks!
bro looked really excited :D
tbh they should've just used the SCSS syntax. it's not worth to switch from it imo.
Exactly my thought especially now that we are in the era of more robust styling tools like styled-components
Where can we find out the information about support for css nesting in browsers and follow the progress of how far along it is to becoming available?
It looks like a quit big "game changer" one day! 😱 Thank you for this!
Thank you so much ❤❤❤
Thank you so much sir,,,, really too helpful video and codes ❣️,...thank you again....❣️!
It was upload 5 minutes ago !! How did u watch it so fast ?!!
@@guestofallah7661 2x
Soo it's not actually plain CSS?
Yes and no. It is using a polyfill essentially to emulate the behavior of how this would work in normal CSS based on the spec unlike something like SCSS which is its own nesting system.
@@WebDevSimplified Okay, that makes sense, thanks
I skipped a little at the beginning but I feel like it should be clear in the description somewhere if this possible right now and supported by modern browsers, or if it's not even implemented yet. The title makes it sound like it's an old feature.
That's pretty awesome. I kind of feel like it would have been great to have this in the beginning. Though I can see some growing pains in going from the current version of CSS to the nested CSS.
You don't have to tho. This is purely optional. And honestly this might not even be used that much in production in the real world simply from the fact that we are now very accustomed to component framework. So we don't really thing about styling the way a .button looks when inside a .card container. We instead just make a card component and that card component has its own scoped styles inside of it. They really took far to long with this, to the point where the problem they were solving is barely even a problem
Still extremely happy for this tho
* new feature * -> " I kind of feel like it would have been great to have this in the beginning." -> no shit
@@brandonetter Your comment seems to imply the OP's comment is obvious, but it's clear that "It would have been great at the beginning" implies that is not really that great now days. Which makes sense since we simply found other ways around the problem that this feature is trying to solve (Like SASS, the BAM naming convention, components, scoped styles, etc...)
@@sebastiangudino9377 with layers and layers of post processing that is prone to errors and pure configuration hell. Once standardized you can get rid of tons of complexity.
@@genka14 If you use vite you can create your project in any Frontend Framework (even Vanilla) and you can include Sass by default (As well as TS) with zero hassle.
Pretty sure Angular always included Sass by default. NextJS supports Scoped styles by Default, as well as SASS and PostCSS, same with Nuxt.
You don't need "Layers and layers" of preprocessing to achieve this, just one single layer (PostCSS or Sass) and they both play wonderfully with your desired stack
That final caveat about placing code after the nested parts is a real deal breaker. That's going to cause more issues than it's worth. They should seriously reconsider changing that behavior.
Sorry newbie around css but why is that a deal breaker? Makes logical sense to me that it shouldnt apply after the nesting as it's unclear what is being targeted.
Kyle be teaching us life lessons here
Thank u 💓
I think it's going to be at least 2 years until we can use this in production. I wonder if this update will touch all versions of OS or only the latest one (eg. iOS13, iOS14, IOS15, IOS16...)
Yes finally :D
Next feature: @apply
Kyle Please also make videos on backend concepts
Does that mean you can't specify two sets of nesting? This seems like a major drawback. I guess we will be sticking with less?
And there was no mention of being able to do things like &.className (without a space) does that work ?
it's so easy to use scss that this doesn't matter especially as my visitors would need such a plugin. Will they be bringing in support for mixins too or is it just nesting? Without the support for mixins, SCSS is still better to use.
Should they create css4 declaration like doctype html. So they can create from scratch
great!! …still using scss tho thanks
This is great news as sass/less compilers are way too slow. Can’t wait for nesting to be supported in all browsers. Still, I find the ampersand to be redundant and decreasing readability of the code 😢
Get a faster machine :P
Ok, but when will browsers start supporting it so I can use it 5 years from then when everyone has finally switched to a supporting browser?
wow, now 5 years from now on we can use it :)
Someday, someday this will be implemented
I'm glad to see CSS finally using this feature from SCSS, but I still think SASS/SCSS is superior to CSS because of the Mixins and Functions.
Lots of little complexities. Its odd to me that they chose to use the '&' character which is used in sass for a related purpose but very different meaning. Now I'm wondering how could I write scss that compiles to nested css. I imagine that scss would need to be updated with support for this before it can be used. (Although I can't think of a reason to write scss that compiles to nested css...)
I think that, over time, CSS standards will adopt more and more sass features and you will eventually give up on it. Or, sass will be like TypeScript or Babel, new features added there, eventually adopted into standard CSS spec.
Ouch. I'm not sure. I'd like the opposite: less readable / writeable CSS that depends even more on a transpiler / compiler. And I don't get why it hasn't always been that way instead.
I think at first it can seem convoluted as many have already said. But all these limitations could actually be beneficial in the long run, meaning that everybody will be forced to use the same style by avoiding adding nested code when selecting multiple elements (with commas) and adding nested code only at the end of each component. Also strictly using the & as the first selector.
Cool!
Will it work in the Firefox browser in the future?
When this will be formally supported?
maybe the upside of this thing is doing the nesting of media queryies inside of a block like in Sass and thats nice but not as nice you write to many & simbals inside of the code i wont lie its a nice update but Sass in my opinion is just at the moment better!
How is this different from other preprocessors? It's not built-in functionality.
When will browsers natively support nesting?
How to use this feature in vscode
Perhaps, they've switched to :where() selector (to remove the specificity) instead of :is() one for the specificity concern...?
The specificication still says :is so that is what I was going off of.
wonder how the nesting looks when debugging styles in browser dev tool? if it shows up as "& p", that's pain in the ass, if dev tools converts "& p" to "article p", all good
now working
p{
color: blue;
section &{
color: purple;
}
}
hahaha when you changed the text color to blue for a second (before going to white) I was like NOOOOOO! 😅
👍👍
hey! calling from january 2024 here . is it supported now?
Why is using a pre-processor considered native CSS? I think native or "plain" CSS should be styles that don't need any processing.
let's goo
How is this better than scss?
Not seeing a compelling reason to ditch SCSS. This syntax is nowhere near the tidiness afforded by SCSS nesting, imo.
I'm glad I'm too lazy and stubborn to learn all those fancy css cousins before.
Omg!!!
Click bait. Title should be "How To Use Nesting In PostCSS" !
Plain css is plain css. And new feature is available only when all latest browsers support it.
it is still css🗿
@@degenyakuza It's "enhanced" css. So no - that is not "plain css". 😬
But isn’t the plan that this “will be” the plain css of the future?
@@badcatdesign There is a difference between “how to use” and “how will we be able to use it in the future”. Plain css means - you take document, you put there html + css. And it works without using any enhancement libraries or polyfills. Please, use common sense.
I would rather use preprocessing css than plain css with lower compatibility and performance.
this feature is long overdue
Promising but I'll stick to scss for the moment
Do you do gaming?
in sass & means "if class has this"
Off topic question...why are you conding on windows and not Mac or Linux?
Can we all just agree to use scss
The @nest tag feels very unnecessarily complicated 😵💫
First comment , give me heart
Please pin
"This is has the class red" 💀
why didn't they think about that when they created it? 😭😭😭
lol a 11 minute video explaining why SCSS is always better than CSS 😂😂😂
it's been 7 months and it's not supported yet 🙃
Hi kyle. your speeking is good understandable but very fast for me. unfortunalety, english is not main language for a lot of people, like me. please slowly speek. thanks a lot.
You can change youtube player speed
Seconed
Sooo... since this isn't supported in any of today's browsers, how is this lesson not useless? Not hatin', genuinely curious.
Helpline 📲📩⬆️
Questions can come in⬆️
Id say its a shame that native nesting is more complicated than in sass/less :(
yes but that is NOT they way we want it, we want for rules to INHERIT the properties of other rules, not to mirror the HTML structure then apply styles to it
Please avoid "background: red" on half the screen, it hurts to watch it for so long
It took CSS 20+ YEARS to do what EVERY other language is capable of by default. That's how bad CSS is. CSS is the ONLY language where people get excited about being able to nest things logically. SASS and LESS are a result of how BAD the CSS language truly is.
Interesting... But Sass seems better, less weird gotchas.
fr fr????
SCSS >> CSS
sass is dead :v?
This is good but it has so many weird gotchas.
Alright, time to ditch Sass
Sass ( SCSS ) Is gone lol 😆 💀
CSS creators sure like to bloat
Meh, I stick with SCSS.
CSS nesting is a available in SCSS for a long time. Your title says, 'in plain CSS' and then you talk about how it can be done using postCSS. What a cheater.
SCSS is king ok
SCSS compiler slow? Get a faster machine
SCSS is too difficult? I don't think web development is for you...
not worth it
"specificity" is the absolute worst thing since the Triassic extinction event.
i use scss just bc of the Nesting now no more scss