Always aim high

I was doing a bit of tweaking on our agency site the other day. I introduced a <del> element to one of the headings in a new post. It looked pretty rubbish though because the text decoration was the same colour as the text and made it hard to read.

At first I thought, “easy, I’ll just add text-decoration-color to <del> elements”.

del {
  text-decoration-color: var(--color-secondary);
}

That was easy, but it feels a bit specific to me, especially when we already have this rule:

a {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

This makes links look like this:

I want both the <del> and the <a> to have that same text-decoration effect, including the thickness, so I do a grouped selector right?

a, del {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Well, yeh, that works, just like the first snippet of CSS does, but it’s not global enough for my liking. What happens if say, I want to use an <ins> element one day?

The answer is a universal selector, also known as a wildcard:

* {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Now, any element that has text-decoration—that doesn’t define it’s own text-decoration-color or text-decoration-thickness—will have this rule applied automatically.

This is the power of CSS right here. If you do as much as you can, as high up as you can, you write a hell of a lot less CSS. Then, when you use semantic HTML: pages just style themselves.

Now doesn’t that look lovely?