Getting started with CSS nesting
70.5 هزار بار بازدید -
پارسال
-
Nesting has landed in native
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: https://caniuse.com/
✅ The official spec: https://www.w3.org/TR/css-nesting-1/
✅ More info on it from Chrome Developers blog: https://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: discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 Twitch: kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: Patreon: kevinpowell
---
My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
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: https://caniuse.com/
✅ The official spec: https://www.w3.org/TR/css-nesting-1/
✅ More info on it from Chrome Developers blog: https://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: discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 Twitch: kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: Patreon: kevinpowell
---
My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
پارسال
در تاریخ 1402/04/27 منتشر شده
است.
70,524
بـار بازدید شده