CSS - Selectors

For a few minutes, I felt like Indiana Jones staring at the holy grail. 230ms of savings from some CSS selector changes. This felt significant. And yet, the niggling phrase of “CSS selector efficiency is not something to worry about in 2024” kept ringing through my head.

I ran the before/after through WebPageTest and to my surprise (and lack of surprise), nothing significant had changed.

TIL that all modern browsers now support complex selectors in :not()! 😍

https://dabblet.com/gist/e7769cbe23d3670665e97a03fe0622d3

So you can do things like:

• .foo :not(.foo .foo *) to match things inside one .foo wrapper but not two
• .container :not(.content *) to get simple (shallow) “donut scope”

So this is a really interesting way to determine which, if any CSS rules are unused in a stylesheet, site-wide:

Part of this story could certainly be about deleting CSS that is determined to be “unused” in a project. I know there is incredible demand for this kind of tooling. I feel like there are some developers damn near frothing at the mouth to blast their CSS through some kind of fancy tool to strip away anything unneeded.

[…]

Here’s how one company I heard from was doing it:

1. They injected a script onto the page for some subset of users.
2. The script would look at the CSSOM and find every single selector in the CSS for that page.
3. It would also run a querySelectorAll(“*”) and find every single DOM node on that page.
4. It would compare those two sets and find all selectors that seemed to be unused.
5. In order to get the best results, it would fire this script after a random amount of seconds, on a random set of users, in a random set of conditions. Even with this, it needed a lot of data over a long period of time.
6. After that had run for long enough, there was a set of CSS selectors that seemed likely to be unused.
7. To be sure, unique background images were applied to all those selectors.
8. After applying those and waiting for another length of time, the server logs were checked to make sure those images were never accessed. If they were, that selector was used, and would have to stay.
   Ultimately, the unused selectors could safely be deleted from the CSS.

Whew! That’s an awful lot of work to remove some CSS.

But as you can imagine, it’s fairly safe. Imagine just checking one page’s CSS coverage. You’ll definitely find a bunch of unused CSS. One page, in one specific state, is not representative of your entire website.

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Take for example the following HTML code:

and the following CSS:

If the div with the class .container receives focus (it can in this case as it has a tabindex of 0, this is purely for example purposes), it will have a background colour of #aaa.

But it will also have a background colour of #aaa if any of its descendants have the focus. So if the <input> receives focus, then the div’s background will also be #aaa.

This will remove the need for JavaScript that is often used to achieve this effect.

This asks the question ‘Is this element the first-child and the fourth-last element that I’m working on OR does this element come after the first-child and the fourth-last element that I’m working on?’