Wow this was a great talk. I hardly ever manage to watch videos of talks through to the end anymore, for reasons of internet social media attention span etc etc. But this one just sucked me right in. I didn't even know that I didn't know what the browser is doing when it's "styling", love it.
I wish these CSS selector details were better documented somewhere. For example, if right to left is always true, then<p>.cls[attr="value"] is always slower than [attr="value"].cls<p>But I never see anybody using the second one.<p>I think it's also interesting that there is no way to do figcaption.cls inverted like .clsfigcaption.<p>It's strange that default CSS that comes with tools like Wordpress abuses pseudo-selectors as much. I think everyone just writes it off as "it's the CSS 3 way."<p>On interesting example is that some javascript libraries to highlight code syntax will use ancestor selectors like .highlighted .keyword, which in my mind is crazy. You are making the classes through javascript, you could just use a single glass, which is what Highlight.js does: its classes look like .hlts-kw.<p>One time I had to deal with layout in CSS being too slow. It was not because of webpage, but an electron app for android that needed to get the bounding rectangle a lot to place divs for its custom GUI elements on screen. Since changing the DOM/CSS changes the bounding rects, placing a div and then checking the bounding rect again was a performance cost. The solution ended up being caching the client rect once before updating the DOM to avoid the thrashing.<p>Anyway, great talk :D I hope more people become aware CSS isn't magic, nor a black box, so they can think twice before writing their selectors. Sometimes I see CSS code with superfluous nested ancestors (e.g. .wrapper .content .post-body img), and I think that happens because it really just works, but unfortunately it seems that mentally carries on after a developer stops being a beginner, because the CSS just keeps working anyway.