Learn CSS Nesting in 4 Minutes (Pros & Cons)
Вставка
- Опубліковано 11 лют 2025
- CSS Nesting is revolutionizing how we write stylesheets by enabling selectors to be nested within other selectors-a feature once exclusive to preprocessors like SASS and now supported natively in CSS by all major browsers. In this quick and practical video, we'll cover CSS Nesting syntax, its pros and cons, and essential tips for working with descendant selectors, pseudo-classes, and the ampersand symbol (&). We’ll also discuss browser compatibility, the impact on specificity, and when it makes sense to integrate this feature into your workflow.
Topics Covered:
How CSS Nesting works: from basic usage to complex structures
Readability and repetition improvements
CSS nesting pros and cons. (Should you use CSS Nesting).
CSS nesting browser support and real-world considerations
By the end, you’ll know whether CSS Nesting is right for you and how to use it effectively.
😎 Become a Member to Support our Channel: / @coding2go
👉 Get our HTML & CSS Course on Udemy: www.udemy.com/...
Host Your Own Website With Hostinger:
🚀 www.hostinger....
✌️ And get a huge discount with our code: CODING2GO
Concepts you will learn in this video:
✔ HTML, CSS
✔ CSS Pro tip for beginners
✔ css tips and tricks
✔ how to improve in css
✔ how to write better css code
✔ how to write clean css code
✔ CSS Nesting in native CSS
✔ How CSS Nesting improves readability
✔ Nesting selectors in CSS
✔ Using pseudo-classes with nesting (e.g., :hover)
✔ Writing clean and organized CSS with nesting
✔ Browser support for CSS Nesting
✔ CSS specificity and nesting
✔ Best practices for writing CSS
✔ CSS Nesting vs. traditional CSS
✔ When to use CSS Nesting
Vote for Full Stack Web Development course from this Guy!
Absolutely ❤❤❤
as long as it's not typescript i'll watch.
@@RobbPage TypeScript is becoming the standard in the industry. You have to learn it. Also it's easy
@@youarethecssformyhtml of course it's easy. i didn't say i don't KNOW typescript, i just refuse to use it because it's yet another symptom of "modern" devs laziness and lack of skill/knowledge.
typescript is a crutch for lazy unskilled devs. real devs don't need it.
@@RobbPage that's a hot take. There's a reason why people use statically typed languages like C#, Java, Go, Rust, Kotlin.... They make the code more readable than dynamically typed languages, eliminates a whole class of bugs because of wrong types and null's, and make the code maintainable.
You can use JSDocs but they're so annoying to type and make the code look ugly. I don't know how TS have made developers lazy. It literally reminds to check against undefined and null and it makes the code more readable with types and interfaces.
It's stupid to say real developers don't need it. You're just making your life harder for absolutely no good reason.
I really need this video. Because, I was trying some, where I need nest to the css, but it became so massive. But, due to this video. It's very easy to nest the different elements. Thank you so sir.
I'm using CSS nesting and it's awesome.
Just recently discovered CSS nesting. Absolutely loving it. I can make up for some nesting with comments. I'm minifying my production code anyway. 👍
I love CSS nesting and I use it on a daily basis. I don't see the same cons, as mentioned in the video. Furthermore, I use nesting for my header, main, footer and components separately. This way you keep it clear to read and know where to start changing things. Complex selectors I like to outsource or write at the bottom of a CSS block.
CSS nesting is great! It would be helpful to mention naming strategies like BEM, where nesting really shines. Additionally, the comment about PostCSS is somewhat misleading. While nesting is beneficial for developer experience, I prefer not to use it in production. In my opinion, minified and unglified styles are still the best approach.
It's awesome. I like it, specially when you have many components in one single css file like Header, Footer, different Sections...
love this channel
If I have a very nested structure and I want to change 1 of those very nested classes in a media query, it makes for very awkward syntax.
You can't just select the class, you need to select the entire nested tree to apply the changes.
Nowadays I only use nesting on pseudo selectors and sudo elements
it saves lot of time & keystrokes
Please, what is your workflow for recording and editing your videos
Hi Coding2go,
I have a CSS challenge that I haven’t been able to solve and would love your help!
I’m working with a fixed div at the top of the page that doesn’t scroll when the page scrolls (as expected). However, the div contains a background image, and I want the background image itself to scroll along with the page, while keeping the div fixed.
I’ve tried multiple approaches but haven’t found a solution that works. I believe this could be an interesting and helpful topic for many viewers, so it would be amazing if you could create a video to explain how to achieve this effect.
Looking forward to your thoughts and a potential solution! Thank you! 😊
Im not entirely sure but maybe you are looking for background-attachment css property
I stop coding a year now and i try it again
GoodJob!
/* It seems that we can't write:*/
.item{
code here
&-red{
red variation here
}
}
/*to replace*/
.item{
code here
}
.item-red{
red variation here
}
/*As we did in sass. Am I right ?*/
Kindly put a Next js
*All us SASS people...*
Ughhhh, those curly braces, semicolons, and extra lines ... _why in the world would you use them?!_ SASS, ftw. 😜
i'd argue that nesting to GET that specificity can also be useful.
i use both simultaneously, depending on the situation but honestly it usually comes down to my mood at the time and how i feel about the "look" of my code. it's not uncommon for me to waste an hour restructuring my code simply because i don't like the way it looks.
Nesting for breath, not nesting for depth
Nesting is updated. U haven't use & all time
Write standard css as fast as u can then put into ChatGPT and ask convert to nesting... Simple right 😂
no ty