Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I knew at least a little bit about CSS 😂
On using the :not pseudo-class to pre-emptively use the cascade to stop future conflicts on broad rules e.g. a:not([class]) { ... } :
We qualify elements with the:notpseudo class because if you have a link that’s supposed to look like a button that has a.buttonclass on it, you don’t want global link styling to get in the way of the styling that.buttongenerates, so this approach helps that.
👆 This is one of those absolute AHA! moments. I generally don't find myself clashing with specificity in CSS, but I feel like this pattern might have prevented/fixed the few times it does happen. So long as there isn't a blank class, I guess, but it could be extended to a:not([class]), a[class=""] { ... }.
Andy also recommends setting classless anchor elements to use the currentColor keyword, thereby inheriting the styles of their containing text 🤯 e.g.
a:not([class]) {
color: currentColor;
}
On providing high contrast text selection:
Lastly, selection styles! I like to add a high contrast selection style, personally. It’s a handy inclusion strategy because folks might find your colours hard to read, so giving them the inverse when they select it’s helpful.
And finally, just a really interesting usage of the em-dash:
globally, too—especially if your blog is just articles, but to keep things future-friendly, we’re
I've never seen an em-dash used like this, as a break and then immediate return to flow. It may be a typo, but it reads perfectly well. After my double-take to see if I'd missed a line, I re-read it and it just worked. If the pattern were more common, I don't think I'd question it. Not sure of the grammatical side of things, but I like it a lot.
