Styling With Attribute Selectors

CSS can do *a lot* — in this episode, Michael Chan will teach us how much we can accomplish with data attributes and CSS selectors! 00:00:00 Stream start 00:00:11 Party Parrot time 00:01:03 It's fun to be with friends that are weird 00:02:11 Guest introduction 00:05:06 Smash burgers 00:10:06 Let's talk about CSS 00:14:22 It's not a mistake, it's learning 00:24:14 You're always optimizing for something 00:25:58 Building fires 00:30:36 Where should we start? 00:34:54 What's the Netlify CLI? 00:38:07 Issues with disabling default styles 00:42:14 What about disabled pseudo classes? 00:49:36 There are no silver bullets in problem solving 00:52:22 How we can use attribute selectors to our advantage 00:58:37 Options in attribute selectors 01:03:55 Using pseudo selector for insecure URLs 01:08:52 Solving problems with a rubber corgi 01:10:31 ~= gets into framework territory * demo: https://css-attribute-selectors.netlify.app/ * repo: https://github.com/learnwithjason/css-attribute-selectors Links: - https://avocss.dev/ - https://chan.dev/posts/compare-avo-and-standard-bem-conventions/ - https://chan.dev/posts/compare-avo-and-standard-bem-conventions/ - https://www.npmjs.com/package/burger.css - https://twitter.com/threepointone/status/1459574071465762820 - https://www.burgers.dev/ - https://discord.gg/lunchdev - https://www.learnwithjason.dev/store - https://www.prisma.io/serverless This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Fauna (https://lwj.dev/fauna) - Auth0 (https://lwj.dev/auth0) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) Credits: Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com