Recent CSS Bookmarks 18: 12 Days of Web CFP, CSS Resets, and Selectors

Published on:: November 4, 2024
Categories:: CSS⁴⁸, CSS Resets, CSS Selectors², bookmarks¹⁹
Current music:: Helios — Coast Off
Current drink:: Ceylon tea

After a large gap, I am continuing reading and sharing the recent bookmarks I gathered. I’ll mostly go through more recent ones, but I’ll include one section with a few older ones as well.

The order in every section is from the older to newer articles. Sorry if I missed something you posted!

12 Days of Web CFP

Speaking of new articles. For the first bookmark, I wanted to highlight this year’s 12 Days of Web.

Stephanie Eckles opened a Call For Proposals, which will be open until November 10, with articles due by December 5.

I highly recommend participating (I did so last year). If you don’t yet know the topic you’d want to write about: the CFP has a list of them for you to choose from.

CSS Resets

It is always interesting to look at what other people consider their best “default” styles. Recently, many authors shared theirs. Interestingly, I do not use such a reset myself!

“Introducing TODS – a typographic and OpenType default stylesheet” by Richard Rutter — a detailed article about typography-focused CSS defaults, going through many OpenType features and proposing a better default value for some of them.
“How I Built ‘The Monospace Web’” by Oskar Wickström — a post with a few details about how the author built “The Monospace Web” exploration. It is not just a “reset”, but the main idea is very similar: to have some particular default styles for all elements.
“My Modern CSS Reset” by Jake Lazaroff — an article with an explanation of what and why goes into the author’s CSS reset, as well as what they put into a “classless framework”.
“You are not a CSS dev if you have not made a CSS reset” by Mike Mai — another post about a CSS reset, with an inflammatory title, and a few other opinionated bits.
“Your CSS reset should be layered” by Mayank — a post with a simple advice to put your reset into an @layer and a few arguments for doing so.

Many of these articles link to older articles by other authors about their resets, which could be a good read if you’re interested in reading even more about this topic.

Selectors

Continuing from CSS resets — one of the main aspects of which are selectors — I’ll also mention some bookmarks specifically about them. This section will contain a few “older” links from my backlog as well, as a way to try to manage its size.

“Ignore and acknowledge class attribute on elements in CSS” by Amit Merchant — a short post that names a concept of ignoring or acknowledging the presence of some attribute, like the [class] one.
“MacOS-like dock effect with a ‘previous-sibling combinator’” by Kevin Pennekamp — a post about how :has() selector allows us to select previous siblings with a dock-like effect as the example.
“CSS :has(), the God Selector” by Bruce Lawson — another post about how :has() could be used separately from the actual element we’re selecting, and how powerful this could be. If anyone remembers the “subject selector” — it was replaced with :has(), which is, indeed, much more versatile.
“CSS ‘Quantity Queries’ are a thing now” by Matt Fantinel — a post that looks at how we can now use :has() for quantity queries. (Term coined by Heydon Pickering.)
“Day 108: the of S syntax in :nth-child()” by Manuel Matuzović — a post that focuses on the optional selector argument of :nth-… pseudo-classes, which is a mighty new feature of them.
“Double your specificity with this one weird trick” by James Nash — a post about how multiple mentions of the same class selector in CSS still bumps up the rule’s specificity. While using the same class is a way to do so, in similar situations I prefer to use the before mentioned acknowledgement selector. So, .foo[class][class] instead of .foo.foo.foo. Although, with :where() and @layer, hacks like these, hopefully, will eventually go away.
“:nth-next-sibling? No need.” by Christopher Kirk-Nielsen — a post about a neat hack with the selector argument of a :nth-… family of pseudo-classes. I disagree with the title: the hack itself allows us to only select a finite span of elements, while a hypothetical :nth-next-sibling() would be able to select repeated sequences of them — something I explored in my “A Christmas Tree Selector: Prototyping the :nth-sibling() with CSS Nesting” post.
“I wasted a day on CSS selector performance to make a website load 2ms faster” by Trys Mudford — a post about how Chrome performance profiler’s “CSS selector stats” can only show the relative performance of selectors, with the actual numbers it will show being impacted by all the added instrumentation.
“Possible Future CSS: Tree-Counting Functions and Random Values” by me — while the topic itself is about future functions, the article focuses on the way we can prototype them today by using complex selectors, including those based on quantity queries. Speaking of selectors’ performance: my experiments in this article crashed Safari. We must be careful when using both :has() and native CSS nesting.
“Making content-aware components using CSS :has(), grid, and quantity queries” by Eric Bailey — a post about a real-life use case for quantity queries based on :has() for switching a position of some elements inside a CSS grid. In my opinion, ideally, for cases like this one, we’ll need something that would allow us to detect when things wrap in CSS, like what I prototyped with scroll-driven animations in my “Position-Driven Styles” article.
“Select the first occurrence of an element in the whole document” by Temani Afif — a clever trick that combines :has(), :nth-child(of …), and :not() pseudo-classes for selecting a first or last element similar to the way querySelector() does it in JS. Based on my experience, I’ll be a bit wary of its potential performance implications, especially in Safari, so if you try using it, test it extensively.