Surprising differences in Selector Performance

From the creator

After posting a video on semantic CSS using attribute selectors - https://youtu.be/lWu5zf_S9R4 - I got a lot of questions about the performance of attribute selectors, and even some people straight up telling me that they're slow. Like so many things in web development, some well-established things are rooted in decade-old information that hasn't been true for awhile. It seems like this is the case here. Still, it also turns out there are some selectors that I use regularly, and at least one that basically everyone uses, which actually are slow (relatively speaking, anyway)! 🔗 Links ✅ Great article exploring selector performance, and how to use the Edge dev tools in more detail: https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/ ✅ Incredible conference talk on CSS runtime performance by Nolan Lawson: https://www.youtube.com/watch?v=nWcexTnvIKI ✅ The Semantic CSS video I mentioned: https://youtu.be/lWu5zf_S9R4 ⌚ Timestamps 00:00 - Introduction 01:39 - How we’re doing the tests 05:21 - Class vs. Attribute selectors 08:28 - comma-separated selectors vs. :is(), :where, and :not() 13:30 - The universal selector 15:38 - Is it worth worrying about? #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

Published 2023-03-28 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.