CSS - Selectors

How to determine which, if any CSS rules are unused on a site

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

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:

Code language: HTML

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>

and the following CSS:

Code language: CSS

.container:focus-within { 
  background-color: #aaa; 
}

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.

Using Quantity Queries to write content-aware CSS

Code language: CSS

:first-child:nth-last-child(4),
:first-child:nth-last-child(4) ~ * {
  /* Styles here */
}

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?’