Naming things just got easier thanks to @scope

Kevin Powell β€’ June 20, 2024
Video Thumbnail

About

No channel description available.

Video Description

πŸŽ“ Check out CSS Demystified: https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=scope @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-ui/at-scope βœ… 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 πŸ’¬ https://discord.gg/nTYCvrK 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! πŸ“Ί https://www.twitch.tv/kevinpowellcss --- Help support my channel πŸ‘¨β€πŸŽ“ Get a course: https://www.kevinpowell.co/courses πŸ‘• Buy a shirt: https://teespring.com/stores/making-the-internet-awesome πŸ’– Support me on Patreon: https://www.patreon.com/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: https://twitter.com/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!

No Recommendations Found

No products were found for the selected channel.