Naming things just got easier thanks to @scope

🎓 Check out CSS Demystified: https://cssdemystified.com/?utm_campa...

@scope is here, and it's pretty awesome! This video is a bit of crash course into it, looking at why it can come in handy, where it fits into the cascade, some of the potential issues you can run into when using it, and more.

🔗 Links
✅ Bramus’ great article on scope: https://developer.chrome.com/docs/css...
✅ Browser support table: https://caniuse.com/css-cascade-scope

⌚ Timestamps
00:00 - Introduction
00:43 - Why you might want scope in the first place
03:40 - Avoiding this issue using @scope
06:50 - Why this solves the problem - scope proximity
09:05 - Specificity still matters
10:28 - CSS Demystified
11:08 - Stop running into specificity issues thanks to scope
13:30 - Stop the scope at a specific element or elements
16:25 - You can have selector lists if you need to target several elements
17:16 - The difference between & and :scope
20:52 - Things will still inherit!
22:24 - Using inline style blocks
24:45 - 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
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on 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:   / 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:   / 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!